美文网首页
jQuery实现bannner轮播图(详细讲解)

jQuery实现bannner轮播图(详细讲解)

作者: 大黑不小白 | 来源:发表于2017-03-10 11:21 被阅读0次

大多数新手前端总会遇到bannner轮播的问题,网上的资源也可以,如superslide.com。不过如果能自己写一遍bannner轮播,能很好的将jQuery的基础知识点串联起来,复习并加深印象。这里是我自己整理编写的代码,如果你了解了jQuery的基本方法事件,能够很容易看明白。这里分三步来实现。注:bannner轮播有N多种实现方法,先学会一种,能够融会贯通即可,不必纠结简易。
先上HTML代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner slide演示</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript">

        $(function(){
            var Run=true
            var Num=$('#slideWrap .slide>li').length   //定义bannner的数量,$('#slideWrap .slide>li').length也可以直接用阿拉伯数字代替,这里使用“.length”会显得专业。
            var NumHTML='<ul class="num">'
            for(var i=1;i<=Num;i++){
                NumHTML+='<li>'+i+'</li>'
            }                                        //使用一个for循环,将bannner上的页码动态添加到bannner代码后
            NumHTML+='</ul>'
            $('.slide').after(NumHTML)  //使用after()方法,第一步页码动态生成结束

//css中给bannner设置display:none;z-index:0  在<li>标签后面模拟添加style="display:block;z-index:1",就可以控制哪张图片出现
            function showSlide(i){
            if(i==$(".num>li").index($('.num>li.current'))){   //加判断,避免同一张出现重复效果,注意index用法
                return null
            }
            $(".slide>li").finish().filter(':visible').css({'z-index':'0'}).fadeOut().end()    使用filter(':visible')方法“过滤”筛选出目标。finish()方法结束动画延迟
                        .eq(i).css({'z-index':'1'}).fadeIn();
            $(".num>li").finish().filter('.current').finish().removeClass().end()
                        .eq(i).addClass('current');
        }
        showSlide(0)
        $(".num>li").mouseenter(function(){
            showSlide($(".num>li").index(this))
        })                         
//发动机准备就绪:基本效果已经达到。
    $('.slide>li').hover(function(){   //实现鼠标hover停止轮播
        Run=false
    },function(){
        Run=true
    })
    setInterval(function(){
        if(Run){                     //这行注意Run的true判断
            if($(".num>li.current").next().length==0){
                $(".num>li").eq(0).triggerHandler('mouseenter')
            }else{
                $(".num>li.current").next().triggerHandler('mouseenter')
            }
        }   
        },1000)
    /*  var j=1
        setInterval(function(){
            if(j=='3'){j=0}
            showSlide(j)
            j++
        },1000)
        */             //一种简单的定时器代码,实现同样效果
})
    </script>
    <link rel="stylesheet" type="text/css" href="css/public.css">
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>

<div id="slideWrap">
    <ul class="slide">
        <li>
            <a href="#">![](images/1.jpg)</a>
        </li>
        <li>
            <a href="#">![](images/2.jpg)</a>
        </li>
        <li>
            <a href="#">![](images/3.jpg)</a>
        </li>
    </ul>
</div>

</body>
</html>

简单的CSS样式

#slideWrap{width: 980px;height: 460px;margin: 0 auto;overflow: hidden;position: relative;}
#slideWrap .slide>li{position: absolute;top: 0;display: none;z-index: 0;}
.num{position: absolute;width: 100px;height: 20px;bottom: 20px;margin-left:450px;z-index: 2;}
.num>li{float: left;width: 20px;height: 20px;border-radius: 20px;background: #eee;margin-left: 10px;line-height: 20px;text-align: center;}
.current{color: red;font-weight: bold;}

相关文章

  • jQuery实现bannner轮播图(详细讲解)

    大多数新手前端总会遇到bannner轮播的问题,网上的资源也可以,如superslide.com。不过如果能自己写...

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • jquery代码实现爱奇艺轮播图效果

    爱奇艺轮播图效果的jquery代码实现。 html部分: css部分: jquery部分:

  • 用js原生实现轮播图

    用jquery实现轮播图非常简单的啦!有没有想过用原生js实现轮播图呢???今天琢磨了一下,摸索出来一个,就和大家...

  • jQuery轮播图实现

    html: 备注:图片width:730px height:454px css: @charset "utf-8"...

  • jQuery实现轮播图

    题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 轮...

  • 2018-07-30

    Jquery和纯JS实现轮播图(一)--左右切换式 一、页面结构 对于左右切换式的轮播图的结构主要分为以下几个部分...

  • web常用库

    js retina.js 实现retina屏幕图片自动替换 slick.js jQuery插件,实现各种轮播图 w...

  • Vue轮播图的实现以及其与jQuery轮播图的简单对比

    最近在学习Vue,然后做了一个轮播图,然后想起之前用jQuery做的轮播图,就打算进行一个对比。 jQuery轮播...

  • jQuery相关插件

    jQuery全屏滚动插件fullPage.js jquery轮播图插件unslider

网友评论

      本文标题:jQuery实现bannner轮播图(详细讲解)

      本文链接:https://www.haomeiwen.com/subject/wnengttx.html