小蜗牛xmg

jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换 


<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>JQ轮播图，图片可调用，自动向左切换+鼠标点击切换</title>
    <script src="jquery-1.11.1.js"></script>
    <style>
        body,ul,ol,li,img{margin:0;padding:0;}
        ul,ol,li{list-style:none;}
        img{vertical-align:top;}
        #img_box{width:470px;height:150px;margin:30px auto;position:relative;overflow:hidden;}
        #img_box ul{position:absolute;top:0;left:0;z-index:1;}
        #img_box ul li{width:470px; position:absolute; top:0;}
        #img_box ol{position:absolute;bottom:15px;right:15px;z-index:2;}
        #img_box ol li{display:inline-block;cursor:pointer;width:20px;height:20px;margin-right:5px;line-height:20px;text-align:center;background:#fff; color:#f60;}
        #img_box ol .active{background:#f60; color:#fff;padding:2px;bottom:2px;}
    </style>
    <script>
        $(function(){
            var iNow = 0;
	        var timer = null;
            var $uLi=$('#img_box ul li');
            var oneWidth=$uLi.width();

            if($uLi.length>0){
                for(var i = 1; i <= $uLi.length; i++){
                    var $olLi=$('<li>'+ i +'</li>');
                    $('#img_box ol').append($olLi);
                }
                $('#img_box ol li').eq(0).attr('class','active');
            };
            $uLi.each(function(i,elem){
                $(this).css('left',i*oneWidth);
            });
            timer=setInterval(toRun,2000);
            function toRun(){
                if($uLi.length>1){
                    if (iNow==$uLi.length-1){
                        iNow=0;
                    }else{
                        iNow++;
                    };
                    $('#img_box ol li').attr('class','');
                    $('#img_box ol li').eq(iNow).attr('class','active');  
                    $('ul').stop().animate({left : -470 * iNow},1000);
                }
            };
            $('#img_box').mouseover(function(){
                clearInterval(timer);
            }).mouseout(function(){
                timer=setInterval(toRun,2000);
            })
            $('#img_box ol li').click(function(e){
                $('#img_box ol li').attr('class','');
                $(this).attr('class','active');
                iNow=$(this).index();
                $('ul').stop().animate({left : -470 * iNow},1000);
            });
            
        });
    </script>
</head>
<body>
    <div id="img_box">
        <ul>
            <li><img src="img/1.jpg" alt="" /></li>
            <li><img src="img/2.jpg" alt="" /></li>
            <li><img src="img/3.jpg" alt="" /></li>
            <li><img src="img/4.jpg" alt="" /></li>
            <li><img src="img/5.jpg" alt="" /></li>
        </ul>
        <ol>
            <!--<li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>-->
        </ol>
    </div>
</body>
</html>

　　

posted on 2017-06-20 15:50  小蜗牛xmg  阅读(175)  评论(0)    收藏  举报

导航