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

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

       如需图片循环滚动效果请访问：http://www.xcsoft.cn/article/93.html

JS代码：

<script src="http://www.xcsoft.cn/Public/js/jquery.js"></script>
<script>
$(document).ready(function(e) {
    var auto_imgauto;
    var defaul_i=1;
    var flash_speed=1000;  //动画显示速度
    var auto_speed=3000  //切换速度
    var img_sum=5;//相片总数
    $(".imglist>.imgurl:gt(0)").fadeTo(0,0)//显示第一张
    function img_auto(){
        //alert(height)
        //alert(mheight)
        if(defaul_i>(img_sum-1)){
            defaul_i=0;
            }
        $(".imglist>.imgurl:eq("+(defaul_i)+")").siblings().fadeTo(500,0)
        $(".imglist>.imgurl:eq("+(defaul_i)+")").fadeTo(500,1)
        //$(".imglist>.imgurl").fadeTo(500,0.5)
        $(".imgdesc:eq("+defaul_i+")").siblings().removeClass("bj")
        $(".imgdesc:eq("+defaul_i+")").addClass("bj")
        defaul_i++
        }
    auto_imgauto=setInterval(function(){img_auto()},auto_speed)
    $(".imgdesc").hover(function(){
        clearInterval(auto_imgauto)
        var val=$(this).index();
        //alert(imgurl)
        //alert(mheight)
        defaul_i=val+1;
        $(".imglist>.imgurl:eq("+(val)+")").siblings().fadeTo(500,0)
        $(".imglist>.imgurl:eq("+(val)+")").fadeTo(500,1)
        //$(".imglist>.imgurl").fadeTo(500,0.5)
        $(".imgdesc:eq("+val+")").siblings().removeClass("bj")
        $(".imgdesc:eq("+val+")").addClass("bj")
            },function(){
                auto_imgauto=setInterval(function(){img_auto()},auto_speed)
                });
    $(".imgurl img").hover(function(){
        clearInterval(auto_imgauto)
            },function(){
                auto_imgauto=setInterval(function(){img_auto()},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;position: absolute;top: 0px;left: 0px;}
#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">第1张说明</li>
    <li class="imgdesc" >第2张说明</li>
    <li class="imgdesc" >第3张说明</li>
    <li class="imgdesc" >第4张说明</li>
    <li class="imgdesc">第5张说明</li>
  </div>
</div>

       如需图片循环滚动效果请访问：http://www.xcsoft.cn/article/detail/id/93.html

标签  技巧网页制作

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