亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

分享慕課網-首頁自適應輪播圖-效果代碼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);
    })
})

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

點擊查看更多內容
11人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
35
獲贊與收藏
926

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消