jquery实现导航图轮播

下面的几个栗子是使用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: 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代码

$(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: 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);
    });
};

效果图：

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

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

posted @ 2016-09-11 20:45 晴晴加油阅读(2266) 评论(0) 编辑收藏举报

刷新页面返回顶部

晴晴加油

再牛逼的梦想也抵不过你傻逼似的坚持

jquery实现导航图轮播

公告

晴晴加油

再牛逼的梦想 也抵不过你傻逼似的坚持

jquery实现导航图轮播

公告

再牛逼的梦想也抵不过你傻逼似的坚持