jquery实现导航图轮播

2023-07-22 15:10:28

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

栗子①

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

//最外层容器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:;

    padding:;

    outline:;

    border:;

}

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:;

    left:;

    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代码

$(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函数里，进行多次调用，程序得到大幅度代码的优化，提高了程序的可复用性。下面我们进行函数的封装，封装好的函数可以的到最大程度的可复用性，相同功能，只需调用相应函数，传入不同参数即可完成，不需要再重新编写相同功能的程序，怎么样，似不似很期待，^_^

栗子③

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:;

    padding:;

    outline:;

    border:;

}

li {

    list-style: none;

}

.wrap {

    width: 200px;

    height: 200px;

    margin: 10px auto;

    overflow: hidden;

    position: relative;

}

.imgWrap {

    width: 200px;

    height: 200px;

    position: absolute;

    top:;

    left:;

    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);

    });

};

效果图：

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

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

码农公寓

相关文章