JS实现图片轮播效果

文章原创地址：http://www.shuonar.com/blog/b2b4a3fc-c7b2-44a5-8e52-0b51e4ab37d8.html

我们首先在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的首页查看图片轮播效果，这里是源代码。