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);
            })*/
    
        })
  • 相关阅读:
    Ubuntu 下配置ftp服务端
    mysql的sql文件的备份与还原
    Virtualbox后台管理之VBoxManage
    主从库延迟对项目质量的影响
    jenkins / ant / jmeter 持续集成接口自动化
    infer 检验IOS项目
    pmd静态代码分析
    利用线上数据验证系统 Gor
    python flask (一)
    python SQLAlchemy
  • 原文地址:https://www.cnblogs.com/zhixi/p/8622043.html
Copyright © 2011-2022 走看看