加载中...

利用JS写了个图片轮播图，自动跳转。这里调用了一个外部JS效果在里面。<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>就是这个啦。大家可以拷贝下来看一下效果。再把这个调用的去掉再看一下效果。看看去与不去的不同吧。。。。。直接上图。。。


JS代码：
<style type="text/css">
<!--
ul,li { list-style:none; margin:0; padding:0;}
#photoShow { width:490px; height:169px; border:1px solid #000; overflow:hidden; position:absolute;}
#photoShow div { position:absolute;}
#photoShow div img { display:block; width:490px; height:169px;}
#photoShow ul { position:absolute; z-index:6; bottom:5px; right:0; overflow:hidden;}
#photoShow li { width:10px; height:12px; line-height:12px; background:#fff; text-align:center; overflow:hidden; cursor:pointer; float:left; border:1px solid red; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; margin-right:5px;}
#photoShow li.on { font-weight:bold; color:#fff; background:red;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
<!--
jQuery(function($){
    var div = $("#photoShow > div");
    var img = $("#photoShow > div img");
    var imgHeight = parseInt(img.css("height"));
    var imgNums = img.length;
    $("#photoShow").append("<ul></ul>");
    for(i=1; i<=imgNums; i++){
    $("#photoShow > ul").append("<li>" + i + "</li>");
    }
    var ul =  $("#photoShow ul");
    var li  = $("#photoShow li");
    li.eq(0).addClass("on");
    div.css({"top" : 0});
    var t = 0;
    var p = true;
        function automation(){
            if(p){
                if(t>=imgNums) t=0;
                li.eq(t).addClass("on");
                li.not(li.eq(t)).removeClass();
                div.stop().animate({top : -t*imgHeight}, "slow");
                t++;
            }
        }
        var aaa = setInterval(automation, 1000);
    li.each(function(i){
        $(this).hover(function(){
            t = i;
            p = false;
            $(this).addClass("on");
            li.not($(this)).removeClass("on");
            div.stop().animate({top : -i*imgHeight}, "slow");
        }, function(){
            p = true;
        })
    })
})
-->
</script>


页面代码：
<div id="photoShow">
<div>
<img src="p1.jpg" />
<img src="p2.jpg" />
<img src="p3.jpg" />
<img src="p4.jpg" />
<img src="p5.jpg" />
</div>
</div>