图片的轮播（轮播图）

首先，既然使用了jquery，制作方法就不再是最基础的那种将图片列表的位置一直改变，例如：切第二张图片left:-100px，切第三种图片left:-200px等等。这种方法在从最后一张图回第一张图时会快速倒回去进行轮播（肯定不是你想要的对不对）

其次，制作目标是轮播基本的三个功能：自动播放；光标移入停止播放，移开继续播放；按钮操作前/后张图片切换。

再然后，制作图片轮播的方法网上非常多，用插件几行代码就可以搞定但是你看不见代码不理解，so我自己理解整理了下代码。

html代码

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>banner图</title>
    <link href="111.css" rel="stylesheet"/>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="111.js"></script>
</head>
<body>
<div class="wrap">
    <div class="banner">
        <div class="bannerCon">
            <ul class="imgList">
                <li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
            </ul>
            <ul class="btnList clearfix">
                <li class="cur"><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
            </ul>
            <span class="pre-nex prev">&lt;</span>
            <span class="pre-nex next">&gt;</span>
        </div>
    </div>
</div>
</body>
</html>

其实我的原理和简单，首先，先把图片并排显示，溢出部分隐藏（float:left; visibility: hidden ;）或着用JQuery

代码写

css代码：

.banner {
    position: relative;
    height: 400px;
    overflow: hidden;
}
.banner .bannerCon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 800px;
    height: 400px;
    margin-left: -400px;
    overflow: hidden;
}
.bannerCon .imgList {
    position: absolute;
    top: 0;
    left: 0;
    width: 99999px;
    height: 400px;
}
.bannerCon .imgList li {
    float: left;
    width: 800px;
    height: 400px;
}
.bannerCon .imgList li a {
    position: relative;
    display: block;
    height: 100%;
}
.bannerCon .imgList li img {
    width: 800px;
    height: 400px;
}
.bannerCon .pre-nex {
    display: none;
    position: absolute;
    top: 50%;
    width: 40px;
    height: 60px;
    margin-top: -40px;
    font: bold 40px/60px Simsun;
    color: #ccc;
    text-align: center;
    border:none;
    background: rgba(0,0,0,.30);
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
    cursor: pointer;
    z-index: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 12px;
    text-align:center;
    z-index: 2;
    overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 6px;
    background-color:#14829e;
    cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }

首先jquery中的animate自定义动画使图片列表的第一列左移120px，用时1000毫秒，左移完成后执行接下来的函数：将图片列表的第一列克隆存在名为temp的变量中，将第一列删除。此时克隆后的temp依然保持着之后marginLeft:"-120px"的css样式，先将其回0，否则在将插到队尾时会盖在前一张上。最后将克隆后的列通过append()插入队尾。

首先将图片列表的最后一列克隆，并将最后一列移除。将克隆后的temp样式设为-120px，否则插到队头时会盖住第一张。

右移：将克隆的temp通过prepend插入队头，注意此时图片列表的第一张不再是原始的第一张而是刚才插到队头的temp，由于temp的marginLeft为-120px，将其变为0。整个图片列表自然会右移，显示上一张。

$btnPreNex.click(function(){      //左右按钮点击事件
            var index = $btnLi.index(this);
            if($(this).hasClass('next')){
                if(!$imgUl.is(":animated")){
                    k += 1;
                    $imgUl.animate({left:-width},speed,function(){
                        $imgUl.css("left",0);
                        $imgUl.children("li:first").appendTo($(this));
                        if(k >= n){
                            k = 0;
                        }
                        $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
                    });
                }
            }
            else {
                if(!$imgUl.is(":animated")){
                    k += -1;
                    $imgUl.css("left",-width);
                    $imgUl.children("li:last").prependTo($imgUl);
                    $imgUl.stop().animate({left:0},speed);
                    if(k < 0){
                        k = n-1;
                    }
                    $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
                }
            }
        });

图片的轮播（轮播图）

猜你喜欢