JS实现图片轮播效果 博客分类： js JavaScript图片轮播jquery说哪儿网shuonar.com

文章原创地址：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的首页查看图片轮播效果，这里是源代码。