浏览 3048 次
锁定老帖子 主题:JS实现图片轮播效果
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2013-05-27
[/url] 我们首先在HTML页面中建立一个div,div里面放需要轮播的东西. <div class="home_picture_div" id="home_picture_div"> <div id="banner_bg"></div> <div id="banner_info">说哪儿网</div> <ul> <li>1</li> <li class="on">2</li> <li>3</li> <li>4</li> </ul> <div id="banner_list"> <a style="display: inline;" href="#" target="_blank"><img alt="说哪儿网" src="image/1.png"></a> <a style="display: inline;" href="#" target="_blank"><img alt="shuonar" src="image/2.png"></a> <a style="display: inline;" href="#" target="_blank"><img alt="shuonar.com" src="image/3.jpg"></a> <a style="display: inline;" href="#" target="_blank"><img alt="说客" src="image/4.jpg"></a> </div> 下面对文本做CSS修饰。 <style type="text/css"> .home_picture_div { position: relative; width: 300px; height: 300px; float: left; overflow: hidden; } /* 图片列表的图片 */ #banner_list img{ border: 0px; } /* 图片标题背景 */ #banner_bg{ position: absolute; bottom: 0; background-color: #000000; height: 30px; filter:Alpha(Opacity=40); opacity: 0.4; z-index: 1000; cursor: pointer; width: 300px; } /* 图片标题 */ #banner_info{ position: absolute; bottom: 0; left: 5px; height: 22px; color: #FFF; z-index: 1001; cursor: pointer; font-weight: bold; } .home_picture_div ul { position:absolute; list-style-type:none; filter: Alpha(Opacity=80); opacity:0.8; border:1px solid #FFFFFF; z-index:1002; margin:0; padding:0; bottom:3px; right:5px; border-radius: 5px; } .home_picture_div ul li{ padding: 0px 8px; float: left; display: block; color: #FFF; border: #E5EAFF 1px solid; background: #454545; cursor: pointer; } .home_picture_div ul li.on { background:#5CACEE; } </style> 下面用js对图片做轮播效果,我们在这里使用了jquery: var t = n =0, count; $(document).ready(function(){ $("#register_button").click(function(){ window.location.href = "nar_quick_register.html"; }); count = $("#banner_list a").length; //4 $("#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"); }); $(".home_picture_div 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"));//给每张显示的图片加上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("home_picture_div").style.background = ""; $(this).toggleClass("on"); $(this).siblings().removeAttr("class"); }); t = setInterval("showAuto()",4000); $("#home_picture_div").hover( function(){ clearInterval(t); },function(){ t = setInterval("showAuto()",4000); }); }); function showAuto(){ n = n>=(count-1)?0: ++n; $("#home_picture_div li").eq(n).trigger("click"); } 要查看该效果,可以到http://www.shuonar.com的首页查看图片轮播效果,这里是源代码。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |