top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
Jquery编写的图片循环渐变切换效果
编辑yang 发布时间2014-09-22 浏览量3732 来源本站编辑 特大
摘要:这是图片循环渐变的效果,本实例已加载jquery.js。

       这是图片循环渐变的效果,本实例已加载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

标签  技巧网页制作

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


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新