jquery实现导航图轮播

时间 2019-12-04

标签 jquery 实现导航栏目 JQuery 繁體版

原文原文链接

下面的几个栗子是使用jquery实现Banner轮播的效果，直接将代码贴出来，从最初级没有任何优化和封装的写法，一直到最后一个栗子，一步步进行了优化，加大程序的可复用性，减小代码冗余。css

栗子①java

HTML布局：注：图片请本身准备，大小为（W：200px H：200px）jquery

//最外层容器DIV
<div id="wrap">
    //图片容器UL
    <ul id="imgWrap">
        <li id="one"><img src="img/1.1.jpg" /></li>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
    </ul>
    //按钮容器OL
    <ol id="numWrap">
        <li class="color"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    //左右按钮
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS样式：注：一些较为特殊的样式已经进行说明，请仔细阅读每个样式添加的意义函数

* { margin: 0; padding: 0; outline: 0; border: 0;
} li { list-style: none;
} #wrap { width: 200px; height: 200px; margin: 10px auto; overflow: hidden;  /*溢出部分隐藏*/ position: relative;
} #imgWrap { width: 200px;   /*图片容器固定一张图片宽高，在JS里使用代码进行动态控制具体宽、高*/ height: 200px; position: absolute; top: 0; left: 0; transition: all .8s ease;    /*设置动画*/
} #imgWrap li { float: left;
} #numWrap { position: absolute; bottom: 10px; right: 10px;
} #numWrap li { width: 10px; height: 10px; background: #ccc; border-radius: 50px; float: left; margin: 5px;
} #numWrap li.color {   /*准备class样式*/ background: red;
} #left, #right { width: 15px; height: 20px; background: #CCCCCC; position: absolute; top: 40%; display: none;
} #left { left: 10px;
} #right { right: 10px;
} #wrap:hover #left { display: block;
} #wrap:hover #right {   /*鼠标移入显示左右按钮*/ display: block;
}

jquery和javascript代码：注：请在<head>标签中提早引入jquery文件布局

$(function() { var index = 0; //将图片的UL宽度撑大
    $("#imgWrap").css('width', $('#imgWrap li').width() * $("#imgWrap li").length); $("#numWrap li").click(function() { //循环清空
        $("#numWrap li").removeClass("color"); //只给点击按钮添加class
        $(this).addClass("color"); //点击按钮，显示对应图片
        index = $(this).index(); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }); $("#left").click(function() { //下标--，才会等于-1
        index--; if(index == -1) { index = $('#imgWrap li').length - 1; }; $("#numWrap li").removeClass("color"); $("#numWrap li").eq(index).addClass("color"); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }); $("#right").click(function() { //下标++，才会等于长度
        index++; if(index == $('#imgWrap li').length) { index = 0; }; $("#numWrap li").removeClass("color"); $("#numWrap li").eq(index).addClass("color"); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }); //开启定时器
    var timer = setInterval(function() { index++; if(index == -1) { index = $('#imgWrap li').length - 1; } else if(index == $('#imgWrap li').length) { index = 0; }; $("#numWrap li").removeClass("color"); $("#numWrap li").eq(index).addClass("color"); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }, 2000); //鼠标移入、移出关闭、开启定时器
    $("#wrap").hover(function() { clearInterval(timer); }, function() { timer = setInterval(function() { index++; if(index == -1) { index = $('#imgWrap li').length - 1; } else if(index == $('#imgWrap li').length) { index = 0; }; $("#numWrap li").removeClass("color"); $("#numWrap li").eq(index).addClass("color"); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }, 2000); }); });

效果图：优化

栗子② 注：HTML、css布局及样式同栗子①动画

jquery及javascript代码this

$(function() { var index = 0; //将图片的UL宽度撑大
    $("#imgWrap").css('width', $('#imgWrap li').width() * $("#imgWrap li").length); //按钮点击
    $("#numWrap li").click(function() { index = $(this).index(); next(); }); $("#left").click(function() { //下标--，才会等于-1
        index--; next(); }); $("#right").click(function() { //下标++，才会等于长度
        index++; next(); }); //优化成函数，使用时能够再各处直接调用
    function next() { if(index == -1) { index = $('#imgWrap li').length - 1; } else if(index == $('#imgWrap li').length) { index = 0; }; //循环清空
        $("#numWrap li").removeClass("color"); //只给点击按钮添加class
        $("#numWrap li").eq(index).addClass("color"); //点击按钮，显示对应图片
        $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }; //开启定时器
    var timer = setInterval(function() { index++; next(); }, 2000); //鼠标移入和移出事件清除、开启定时器
    $("#wrap").hover(function() { clearInterval(timer); }, function() { //不要写var，不然会开启两次定时器
        timer = setInterval(function() { index++; next(); }, 2000); }); });

栗子②主要是对栗子①进行了优化，将重复性代码，放到了next函数里，进行屡次调用，程序获得大幅度代码的优化，提升了程序的可复用性。下面咱们进行函数的封装，封装好的函数能够的到最大程度的可复用性，相同功能，只需调用相应函数，传入不一样参数便可完成，不须要再从新编写相同功能的程序，怎么样，似不似很期待，^_^spa

栗子③

HTML代码：

<div class="wrap" id="wrap1">
    <ul class="imgWrap" id="imgWrap1">
        <li class="one"><img src="img/1.1.jpg" /></li>
        <li><img src="img/1.2.jpg" /></li>
        <li><img src="img/1.3.jpg" /></li>
        <li><img src="img/1.4.jpg" /></li>
    </ul>
    <ol class="numWrap" id="numWrap1">
        <li class="color"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="left" id="left1"></div>
    <div class="right" id="right1"></div>
</div>

<div class="wrap" id="wrap2">
    <ul class="imgWrap" id="imgWrap2">
        <li class="one"><img src="img/1.1.jpg" /></li>
        <li><img src="img/1.2.jpg" /></li>
        <li><img src="img/1.3.jpg" /></li>
        <li><img src="img/1.4.jpg" /></li>
    </ul>
    <ol class="numWrap" id="numWrap2">
        <li class="color"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="left" id="left2"></div>
    <div class="right" id="right2"></div>
</div>

这个布局里写了两个要进行轮播的导航，目的是展现程序的可重复使用性

css代码：

* { margin: 0; padding: 0; outline: 0; border: 0;
} li { list-style: none;
} .wrap { width: 200px; height: 200px; margin: 10px auto; overflow: hidden; position: relative;
} .imgWrap { width: 200px; height: 200px; position: absolute; top: 0; left: 0; transition: all .8s ease;
} .imgWrap li { float: left;
} .numWrap { position: absolute; bottom: 10px; right: 10px;
} .numWrap li { width: 10px; height: 10px; background: #ccc; border-radius: 50px; float: left; margin: 5px;
} .numWrap li.color { background: red;
} .left, .right { width: 15px; height: 20px; background: #CCCCCC; position: absolute; top: 40%; display: none;
} .left { left: 10px;
} .right { right: 10px;
} .wrap:hover .left { display: block;
} .wrap:hover .right { display: block;
}

jquery和javascript代码：

$(function() { //调用
    Tab($("#wrap1"),$("#imgWrap1"),$('#imgWrap1 li'),$("#numWrap1 li"),$("#left1"),$("#right1")); Tab($("#wrap2"),$("#imgWrap2"),$('#imgWrap2 li'),$("#numWrap2 li"),$("#left2"),$("#right2")); }); //封装成函数 //$("#wrap"),$("#imgWrap"),$('#imgWrap li'),$("#numWrap li"),$("#left"),$("#right")
function Tab(wrap,imgWrap,imgLi,numLi,left,right) { var index = 0; //将图片的UL宽度撑大
    imgWrap.css('width', imgLi.width() * imgLi.length); //按钮点击
    numLi.click(function() { index = $(this).index(); next(); }); left.click(function() { //下标--，才会等于-1
        index--; next(); }); right.click(function() { //下标++，才会等于长度
        index++; next(); }); //优化成函数，使用时能够再各处直接调用
    function next() { if(index == -1) { index = imgLi.length - 1; } else if(index == imgLi.length) { index = 0; }; //循环清空
        numLi.removeClass("color"); //只给点击按钮添加class
        numLi.eq(index).addClass("color"); //点击按钮，显示对应图片
        imgWrap.css('left', -imgLi.width() * index); }; //开启定时器
    var timer = setInterval(function() { index++; next(); }, 2000); //鼠标移入和移出事件清除、开启定时器
    wrap.hover(function() { clearInterval(timer); }, function() { //不要写var，不然会开启两次定时器
        timer = setInterval(function() { index++; next(); }, 2000); }); };

效果图：

到这里，就结束啦，具体有什么须要注意的地方，我都已经在代码的注释里写的很明确了，若是你们有更好的方法，欢迎与我交流，共同成长和进步！

入我有理解的不正确的地方，欢迎各位大神批评指正，谢谢