这是图片循环滚动的效果，本实例已加载jquery.js，在1.4.2版本和1.6以上版本测试通过，其他版本未测试，效果类似于本站首页大banner效果

       查看图片切换各种效果演示：http://www.xcsoft.cn/article/411.html

       如需图片循环渐变效果请访问：http://www.xcsoft.cn/article/238.html

JS代码：

<script src="http://www.xcsoft.cn/Public/js/jquery.js"></script>
<script>
$(document).ready(function(e) {
        var imgauto;
        var i=1;
        var height=300;//相片高度，向上滚动，如果向左右滚动，则这里填图片的宽度
        var mheight=0
        var flash_speed=1000;  //动画显示速度
        var speed=3000  //切换速度
        var sum=5;//相片总数
        function auto(){
                if(i>4 || mheight<=-(height*5-height)){
                        i=0;
                        mheight=height
                }
                mheight=mheight-height;
                $(".imglist").animate({top:mheight+"px"},flash_speed);//top:向上滚动，如需向左，可改为left
                $(".imgdesc:eq("+i+")").siblings().removeClass("bj")//这里是序号
                $(".imgdesc:eq("+i+")").addClass("bj")
                i++
        }
        imgauto=setInterval(function(){auto()},speed)
        $(".imgdesc").hover(function(){
                clearInterval(imgauto)
                var val=$(this).index();
                mheight=val*(-height)
                i=val+1;
                $(".imgdesc:eq("+val+")").siblings().removeClass("bj")
                $(".imgdesc:eq("+val+")").addClass("bj")
                $(".imglist").animate({top:mheight+"px"},flash_speed);
                },function(){
                        imgauto=setInterval(function(){auto()},speed)
                });
        $(".imgurl img").hover(function(){
                clearInterval(imgauto)
        },function(){
                imgauto=setInterval(function(){auto()},speed)
        });
});
</script>

CSS代码：

<style>
*{padding:0px; margin:0px;}
#imgscroll{width:800px; height:300px; margin:0 auto;position:relative; overflow:hidden;}
#imgscroll li{ list-style:none; margin:0px; padding:0px;}
#imgscroll .imglist{width:100%; height:inherit; position:absolute;}
#imgscroll .imglist .imgurl{ height:inherit;}
#imgscroll .imglistdesc{width:100%; height:30px; bottom:0px; left:0px; position:absolute; overflow:hidden;}
#imgscroll .imglistdesc li.imgdesc{width:20%; height:30px; float:left; line-height:30px; vertical-align:middle; text-align:center; background:rgba(102,102,102,0.5); margin:0px; cursor:pointer;}
#imgscroll .imglistdesc li.bj{background:#F00; color:#fff;}
</style>

HTML代码：

<div id="imgscroll">
    <div class="imglist">
        <li class="imgurl"><img src="http://www.xcsoft.cn/Uploads/adimg/20140904/thumb_54080af8e59a8.jpg" width="800" height="300" /></li>
        <li class="imgurl"><img src="http://www.xcsoft.cn/Uploads/adimg/20140904/thumb_54080af96f5f4.jpg" width="800" height="300" /></li>
        <li class="imgurl"><img src="http://www.xcsoft.cn/Uploads/adimg/20140904/thumb_54080af9bea26.jpg" width="800" height="300" /></li>
        <li class="imgurl"><img src="http://www.xcsoft.cn/Uploads/adimg/20140904/thumb_54080afa17efc.jpg" width="800" height="300" /></li>
        <li class="imgurl"><img src="http://www.xcsoft.cn/Uploads/adimg/20140904/thumb_54080afa5ee1c.jpg" width="800" height="300" /></li>
    </div>
    <div class="imglistdesc">
        <li class="imgdesc bj">xcsoft.cn</li>
        <li class="imgdesc" >xcsoft.cn</li>
        <li class="imgdesc" >xcsoft.cn</li>
        <li class="imgdesc" >xcsoft.cn</li>
        <li class="imgdesc">xcsoft.cn</li>
    </div>
</div>

       如需图片循环渐变效果请访问：http://www.xcsoft.cn/article/detail/id/238.html

标签  技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)