Jquery效果 首页banner轮播(2) 滚动轮播

上午写了一个很小的banner效果后,发现现在都不流行淡入淡出的轮播效果了,呵呵,下午花了点时间写了个滚动的轮播,感觉代码不整洁,所以不怎么专业,也是一个很小的东西,先放着这里接受点评吧,以后来优化。

注意导入Jquery文件,注意替换合适大小的图片。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>滑动轮播动画</title>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .clear{overflow:hidden; clear:both; width:0px; height:0px; }
        .imgbox{width:640px;margin:0 auto; text-align:center; }
        .banner_Box{width:640px; height:220px;overflow:hidden;}
        ul{padding:0px; margin:0px;width:4500px;}
        ul li{float:left; list-style:none;}
        ul li.select{display:block;}
        .imgnum span{border-radius:10px; font:normal normal bold 12px/15px 微软雅黑; color:#FFF; margin-left:5px; padding:3px 6px 3px 6px;  background-color:#F90; cursor:pointer;}
        .imgnum span.onselect{background-color:#F00;}
        .imgnum{text-align:center; float:right; margin:-25px 30px; position:relative;}
    </style>
</head>
<body>
    <div class="imgbox">
    <div class="banner_Box">
        <ul id="banner_img">
        	<li><img src="images/banner001.jpg"/></li>
            <li><img src="images/banner002.jpg"/></li>
            <li><img src="images/banner003.jpg"/></li>
            <li><img src="images/banner004.jpg"/></li>
            <li><img src="images/banner005.jpg"/></li>
        </ul>
     </div>
    <div class="clear"></div>
    <div class="imgnum">
    	<span class="onselect">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</div>
<script type="text/javascript">
         var time = "";
         var index = 0;
         $(function () {
             showimg(index);
             //鼠标移入移出
             $(".imgnum span").hover(function () {
                clearTimeout(time);                 //清除递归调用
                var icon=$(this).text();
                $(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");
                $("#banner_img li").stop(true,true).css("margin-left","0px");//停止之前的动画。
                
                if(icon>1){
                    $("#banner_img li").slice(0,icon-1).animate({'marginLeft':'-=640px'},600);
                }
             }, function () {
                index=$(this).text()> 4 ? 0 :parseInt($(this).text());
                time = setTimeout("showimg(" + index + ")", 3000);
             });
         });

         function showimg(num) {
             index = num;
             $(".imgnum span").removeClass("onselect").eq(index).addClass("onselect");
             if(index>0){
                $("#banner_img li").eq(index-1).animate({'marginLeft':'-=640px'},1100);
             }else if($("#banner_img li").eq(0).css("margin-left")=="-640px"){
                for(var i=3;i>=0;i--){
                     $("#banner_img li").eq(i).animate({'marginLeft':'+=640px'},600);
                }
             }
             index = index + 1 > 4 ? 0 : index + 1;
             time = setTimeout("showimg(" + index + ")", 3000);
         }
    </script>
</body>
</html>

你可能感兴趣的:(jquery动画,首页轮播效果)