jQuery实现bannner轮播图（详细讲解）

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

jQuery实现bannner轮播图（详细讲解）
项目-轮播图
jquery代码实现爱奇艺轮播图效果
用js原生实现轮播图
jQuery轮播图实现
jQuery实现轮播图
2018-07-30
web常用库
Vue轮播图的实现以及其与jQuery轮播图的简单对比
jQuery相关插件

大多数新手前端总会遇到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;}