【每日一练】焦点图轮播 seChange

通过对日常工作的思考，把遇到过的页面需求抽出来做一些dome，当做练手和实验一些新技术的方式。

工作中时常用到的焦点图切换效果，平时都用一些优秀的兼容性比较好的插件来实现居多。今天来根据自己的思路写一个。

（还需要后续的完善。。。）

html：

    <div class="scroll_pic">
        <ul class="clearfix">
            <li><a href=""><img src="images/b_1.jpg" alt=""></a></li>
            <li><a href=""><img src="images/b_2.jpg" alt=""></a></li>
            <li><a href=""><img src="images/b_3.jpg" alt=""></a></li>
            <li><a href=""><img src="images/b_4.jpg" alt=""></a></li>
        </ul>
    </div>
    <p class="btn">
        <img src="images/s_1.jpg" alt="">
        <img src="images/s_2.jpg" alt="">
        <img src="images/s_3.jpg" alt="">
        <img src="images/s_4.jpg" alt="">
    </p>

 

css：

        .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
        .clearfix { display:inline-block; }
        .clearfix { display:block;} 
        body{ padding: 50px;}
        *{ margin: 0; padding: 0;}
        ul,li{ list-style-type: none;}
        .scroll_pic{ width: 650px; height: 250px; overflow: hidden;}
        .scroll_pic ul{}
        .scroll_pic ul li{ float: left;}
        .scroll_pic ul li a{}
        .scroll_pic ul li a img{ display: block;}

        .btn{ text-align: center; width: 650px; margin: 20px 0;}
        .btn img{ cursor: pointer;}
        .btn img.on{ border: 1px solid;}

 

jq：

            var roll =    $(".scroll_pic"),
                ul = roll.find("ul"),
                li = ul.find("li"),
                btn = $(".btn img"),
                i = 0,
                st;

            ul.width( (li.length) * (roll.width()) );

            function scroll(i){
                btn.eq(i).addClass("on").siblings().removeClass("on");
                ul.stop(true,true).animate({"margin-left":-i*650});
            };
            function setint(){
                st = setInterval(function(){
                    i++;
                    if(i==li.length){
                        i = 0;
                    }
                    scroll(i);
                },2000)
            }
            setint();

            btn.each(function(n){
                $(this).hover(function(){
                    $(this).addClass("on").siblings().removeClass("on");
                    i = n;
                    scroll(i);
                    if(st){
                        clearInterval(st);
                    }
                },function(){
                    setint();
                });
            });

 

 打包下载：seChange.rar