jquery 焦点轮播图控制每张图片停留不同时间

轮播代码是代签博客园一位前辈写的代码,这里作了点小修改,实现了每张图片停留不同时间

*{
            padding:0px;
            border:0px;
            margin:0px;
        }
        ul {
            list-style:none;
        }
        .slideBox {
            margin:50px auto;
            width:300px;
            height:480px;
            box-shadow:2px 2px 10px #C38DD4;
            border-radius:20px;
            position:relative;
            overflow:hidden;
        }
        .slideBox ul {
            position:relative;
            width:2000px;}
        .slideBox ul li {
            float:left;
            width:300px;
            height:480px;
            position:relative;

        }
        .spanBox {
            position:absolute;
            width:300px;
            height:20px;
            bottom:10px;
            left:80px;
        }
        .spanBox span {
            width:18px;
            height:18px;
            margin-left:5px;
            background-color:rgba(201,178,207,1.00);
            float:left;
            line-height:16px;
            text-align:center;
            text-shadow:2px 2px 2px #C5EBF0;
            font-family:cabin-sketch;
            font-size:15px;
        }
        .slideBox .spanBox .active {
            background-color:rgba(155,83,244,0.79);
            border:solid 1px #BEEBEC;
            border-radius:4px;
        }
        .prev {
            position:absolute;
            left:0px;
            top:320px;
            float:left;
            border-left:solid 1px rgba(251,245,246,1.00);
            opacity:0.5;
        }
        .next {
            width:15px;
            height:50px;
            position:absolute;
            right:40px;
            top:320px;
            float:right;
            border-right:solid 1px rgba(245,237,237,1.00);
            opacity:0.5
        }
<div class="slideBox">
    <ul>
        <li><img src="images/chrome.png" alt="" width="300" height="480"/></li>
        <li><img src="images/firefox.png" alt="" width="300" height="480"/></li>
        <li><img src="images/chrome.png" alt="" width="300" height="480"/></li>
        <li><img src="images/firefox.png" alt="" width="300" height="480"/></li>
        <li><img src="images/chrome.png" alt="" width="300" height="480"/></li>
        <li><img src="images/firefox.png" alt="" width="300" height="480"/></li>
    </ul>
    <div class="spanBox">
        <span class="active">q</span>
        <span>a</span>
        <span>z</span>
        <span>w</span>
        <span>s</span>
        <span>x</span>
    </div>
    <div class="prev"><img src="images/limit-top.png" width="50" height="50" alt=""/></div>
    <div class="next"><img src="images/limit-top.png" width="50" height="50" alt=""/></div>
</div>
$(document).ready(function(){
        var slideBox = $(".slideBox");
        var ul = slideBox.find("ul");
        var oneWidth = slideBox.find("ul li").eq(0).width();
        var number = slideBox.find(".spanBox span");            //注意分号 和逗号的用法
        var timer = null;
        var sw = 0;

        //每个span绑定click事件,完成切换颜色和动画,以及读取参数值
        number.on("click",function (){
            $(this).addClass("active").siblings("span").removeClass("active");
            sw=$(this).index();
            ul.animate({
                "right":oneWidth*sw,    //ul标签的动画为向左移动;
            });
        });
        //左右按钮的控制效果
        /*$(".next").stop(true,true).click(function (){
            sw++;
            if(sw==number.length){sw=0};
            number.eq(sw).trigger("click");
        });
        $(".prev").stop(true,true).click(function (){
            sw--;
            if(sw==number.length){sw=0};
            number.eq(sw).trigger("click");
        });*/
        var a = [2,4,5,1,7,1];
        var currentMii = a[sw];
        var count = 0;
        //定时器的使用,自动开始
        timer = setInterval(function (){
            if(count >= currentMii){
                sw++;
                if(sw==number.length){sw=0};
                number.eq(sw).trigger("click");
                currentMii = a[sw];
                count = 0;
            }
            count++;
            console.log(count);
        },1000);



        //hover事件完成悬停和,左右图标的动画效果
        /*slideBox.hover(function(){
            $(".next,.prev").animate({
                "opacity":1,
            },200);
            clearInterval(timer);
        },function(){
            $(".next,.prev").animate({
                "opacity":0.5,
            },500);
            timer = setInterval(function (){
                sw++;
                if(sw==number.length){sw=0};
                number.eq(sw).trigger("click");
            },2000);
        })*/

    })

 

posted @ 2018-03-22 10:36  知兮  阅读(684)  评论(0编辑  收藏  举报