用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - css代码库

焦点图自动轮播

2013-06-27 作者: 云代码会员举报

[css]代码库

html:
 
 
<div class="flash">
 
        <div class="pic_box">
 
            <div id="imgshow">
 
                <div id="img01"><a href="javascript:void(0)" target="_blank"><img src="/images/ZZZ_01.jpg" alt="焦点图" /></a></div>
 
                <div id="img02"><a href="javascript:void(0)" target="_blank"><img src="/images/xuanchuan_02.jpg" alt="焦点图" /></a></div>
 
                <div id="img03"><a href="javascript:void(0)" target="_blank"><img src="/images/shijian_03.jpg" alt="焦点图" /></a></div>
 
           </div>
 
            <div class="dot">
 
                <a href="javascript:void(0)" target="_blank" num="img01" class="current"></a>
 
                <a href="javascript:void(0)" target="_blank" num="img02"></a>
 
                <a href="javascript:void(0)" target="_blank" num="img03"></a>
 
            </div>
 
 
 
 
         </div>
 
 
 
 
    </div>
 
CSS:
 
 
.flash{ width:100%; height:400px; border-bottom:1px solid #D9D5D5; margin:0px 0 10px;}
 
.flash .pic_box{width:100%height:400px; margin:0 auto; overflow:hidden; position:relative; background:url(/images/loading.gif) no-repeat center center;}
 
.flash .pic_box #img03{ background:#fc0; text-align:center;}
 
.flash .pic_box #img02{ background:#2D2D2D; text-align:center;}
 
.flash .pic_box #img01{ background:#C80C26;text-align:center;}
 
.flash .pic_box img{width:960px; height:400px;}
 
.flash .pic_box .dot{ position:absolute; bottom:15px; text-align:center; width:100%;}
 
.flash .pic_box .dot a{width:20px; height:15px; display:inline-block; background:url(/images/dot0114.png) no-repeat 2px -2px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/dot0114.png",sizingMethod="crop");}
 
.flash .pic_box .dot a:hover,.flash .pic_box .dot a.current{ background-position:-18px -2px;}
 
 
 
JS:
 
 
//焦点图:
 
 
 
 
function slide(n) {
 
    if (n >= $(".dot a").length) {
 
        n = 0;
 
    }
 
  
 
    $("#imgshow div").eq(n).fadeIn().siblings().fadeOut();
 
    $(".dot a").eq(n++).addClass("current").siblings().removeClass("current");
 
    t = setTimeout('slide(' + n + ')', 3000);
 
}
 
 
 
 
$(function () {
 
    slide(0);
 
    $(".dot a").hover(function () {
 
        clearTimeout(t);
 
        slide($(this).index());
 
    });
 
 
 
 
 
 
 
})


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...