jquery 图片幻灯轮换效果

最新推荐文章于 2024-08-30 10:26:43 发布

weixin_30588827

最新推荐文章于 2024-08-30 10:26:43 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chendaoyin/archive/2013/04/03/2998450.html

本文介绍了一个使用jQuery实现的图片轮播插件案例，包括HTML结构、CSS样式及JavaScript交互逻辑。通过该插件可以轻松实现图片的自动轮播效果及手动切换功能。

jquery 图片幻灯轮换效果

View Code

#focus {position:relative; width:484px; height:232px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer;}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#focus ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002; margin:0; padding:0; bottom:3px; right:5px;}
#focus ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#focus ul li.on { background:#900;}
#banner_list a{position:absolute;}

count=$("#banner_list a").length;
    $("#banner_list a:not(:first-child)").hide();
    $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
    $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
    $("#focus li").click(function() {
        var i = $(this).text() - 1;
        n = i;
        if (i >= count) return;
        $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
        $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
        $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
        document.getElementById("focus").style.background="";
        $(this).toggleClass("on");
        $(this).siblings().removeAttr("class");
    });
    t = setInterval("showAuto()", 4000);
    $("#focus").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

转载于:https://www.cnblogs.com/chendaoyin/archive/2013/04/03/2998450.html