分享慕课网-首页自适应轮播图-效果代码2

前面一篇分享的可能对新手来说JavaScript代码理解不是很够，所以在此从新写了一个相对来说容易理解一点的！（上一篇轮播图代码地址）

首先-html结构优化（结构还是贴图吧，不然总提示系统错误）：

二、css样式优化，减少不必要的代码：

*{margin: 0;padding: 0;}
.cq_banner{width:100%;height: 600px;margin:0 auto;position:relative;overflow: hidden;}
.prev{position:absolute;left:0;top:50%; padding-right:5px}
.next{position:absolute;right:0;top:50%; padding-left:5px}
.prev,.next{color: #fff;font-size: 80px;z-index: 2;cursor: pointer;margin-top: -50px;font-weight: bold;display: none; background:rgba(240,75,200,0.2);
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;}
.prev:hover,.next:hover{background:rgba(240,75,200,0.6)}
.imgBox{width: 100%;overflow: hidden;height: 700px;position: relative;}
.imgBox li{width:100%;height:700px;overflow:hidden;position: absolute;left: 0;top: 0; text-align:center}
.imgBox li img{position: absolute;top: 0;left:0}
.bannerlist{position: absolute;bottom: 10px;text-align: center;width: 100%;}
.bannerlist span{display: inline-block;width: 12px;height: 12px;border-radius: 50%;background: #fff;margin-right: 5px;cursor:pointer}
.bannerlist span.checked{background: #f60;}

三、JS代码优化-提升可读能力（自己引入一个JS库）：

$(function(){
    $(".cq_banner").hover(function(){
        $(".prev,.next").stop().fadeIn(300);
    },function(){
        $(".prev,.next").stop().fadeOut(300);
    },100)
    $(".imgBox li:eq(0)").show().siblings().hide();
    var page=1,num=1,a=Math.ceil(($(".imgBox li").length)/num);
    $('.next').click(function(){
        if(page==a)
        {
           $('.imgBox li').eq(0).fadeIn(400).siblings().fadeOut(400);
           $(".bannerlist span").eq(0).addClass("checked").siblings().removeClass();
           page=1; 
        }
        else
        {
          $('.imgBox li').eq(page).fadeIn(400).siblings().fadeOut(400);
          $(".bannerlist span").eq(page).addClass("checked").siblings().removeClass();
          page++;
        }
    })
    $('.prev').click(function(){
        if(page==1)
        {
           $('.imgBox li').eq(a-1).fadeIn(400).siblings().fadeOut(400);
           $(".bannerlist span").eq(a-1).addClass("checked").siblings().removeClass();
           page=a; 
        }
        else
        {
          $('.imgBox li').eq((page-a)+1).fadeIn(400).siblings().fadeOut(400);
          $(".bannerlist span").eq((page-a)+1).addClass("checked").siblings().removeClass();
          page--;
        }
    })
    auto=setInterval(function(){
        $(".next").trigger("click");
    },4000)
    $(".imgBox li,.prev,.next,.bannerlist").mouseover(function(){
        clearInterval(auto);
    }).mouseout(function(){
        auto=setInterval(function(){
        $(".next").trigger("click");
        },4000)
    })
    for(i=0;i<$(".imgBox li").length;i++)
    {
        $(".bannerlist").append("<span></span>")
    }
    $(".bannerlist span:eq(0)").addClass("checked");
    $(".bannerlist span").click(function(){
        $(this).addClass("checked").siblings().removeClass();
        $('.imgBox li').eq($(this).index()).fadeIn(300).siblings().fadeOut(600);
    })
})

以上代码仅供大家学习参考