2.Jquery写轮播图——设置z-index属性值实现

一、用jquery是实现轮播图-思路分析
1.声明num，用来存储img的索引
2.声明timeer，用来存储定时器
3.声明isStarted，判断是否开始轮播，初始值给false
4.封装排他属性切换函数
5.鼠标经过小圆点，先停止定时器，然后获取当前的索引值，并赋值给num，接着写属性变化，注意：图片 遍历时索引值为num
6.写定时器函数，注意索引值与img的个数
7.写清除定时器
8.遍历图片，鼠标经过时，调用停止函数，停止遍历；调用展示图片和圆点的的函数； //离开时调用开始定时函数

js模块

// 轮播图 
$(function() {
    var num = 0;
    var timer;
    var isStarted = false;
    //根据索引号判断显示图片和小圆点显示 方便定时器，鼠标经过和离开事件调用
    function showpic(index) {
        $(".banner>ul").children('li').eq(index).addClass("on showimg").siblings().removeClass('on showimg');
        $(".b_dot").children('a').eq(index).addClass("on").siblings().removeClass('on');
    }
    // 鼠标经过圆点，先暂停自动播放，然后根据index切换圆点和图片
    $(".b_dot").children('a').hover(function() {
            stop();
            // 指向当前的索引号index，将值给num，方便img去遍历
            num = $(this).index();
            //根据索引号切换图片和小圆点
            $(".banner>ul").children('li').eq(num).addClass("on showimg").siblings().removeClass('on showimg');
            $(this).addClass("on").siblings().removeClass('on');
        },
        //离开时调用开始定时函数
        start);
    // 根据index索引值遍历图片
    $(".banner>ul").children('li').each(function(index) {
        $(this).hover(function() {
                //鼠标经过时，调用停止函数，停止遍历
                stop();
                // 调用展示图片和圆点的的函数
                showpic(index);
                //索引值
                num = index + 1;

            },
            //离开时调用开始定时函数 
            start)
    });
    //定时器 
    function start() {
        if (!isStarted) {
            isStarted = true;
            timer = setInterval(function() {
                // 调用showpic函数
                showpic(num);
                num++;
                // 判断索引值。当索引值等于个数时，从0开始
                if (num == $(".banner>ul").children('li').length) {
                    num = 0;
                }
            }, 2000);
        }
    }
    // 清除定时器
    function stop() {
        clearInterval(timer);
        isStarted = false;
    }
    // 调用开始定时器，即页面打开就开始
    start();
})

html模块

 <div id="banner" class="banner" style="height: 440.533px; display: block;">
                <!-- 图片切换 -->
                <ul class="ui-sortable publish-slider" id="publish-copy">

                    <li class="">
                        <img src="./images/b1.jpg" class="" />
                    </li>

                    <li>
                        <img src="./images/b2.png" class="" />             </li>

                    <li>
                        <img src="./images/b3.png" class="" />
                    </li>
                </ul>
                <!-- 小圆点按钮 -->
                <div class="b_dot" id="b_dot">
                    <a href="javascript:void(0);" class=""></a>
                    <a href="javascript:void(0);" class=""></a>
                    <a href="javascript:void(0);" class=""></a>
                </div>
            </div>

css模块

.banner {width:100%;overflow:hidden;position:relative;/* background: url("//pc2.gtimg.com/pc/images/f2/17/f217b1ca234356bf39844218cebe135e.jpg") center no-repeat; */background: #0c76ff;display: none;}
.banner li {position:absolute; top:0; left:0; width: 100%; text-align: center}
.banner img {width:100%; _width:1270px; vertical-align: top;}
.b_dot {height:10px;text-align:center; position: absolute; z-index: 1000;
    bottom: 25px!important;
    left: 50%;
    margin-left: -39px;
    _bottom:20px;
}
.b_dot a {display:inline-block; width:23px; height:33px; background:url(../images/b_dot.png) 0 0 no-repeat;}
.b_dot a.on {background-position:-21px 0;}