zoukankan      html  css  js  c++  java
  • 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);
            })*/
    
        })
  • 相关阅读:
    <转>反调试技巧总结原理和实现
    反调试功能<IsDebuggerPresent>
    通过取得MAC地址判断是否在VM中
    任何值得拥有的东西
    我的程序里
    吸引力法则之谜——十一条被遗忘的定律
    要成功,请忘掉自尊
    我是个只顾着想,却不去做的人
    现在有12个金币,其中一个有质量问题(或重或轻),还有一个无砝码的天平,让你称三次怎么样找到那个有质量问题的金币?
    惆怅
  • 原文地址:https://www.cnblogs.com/zhixi/p/8622043.html
Copyright © 2011-2022 走看看