欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-26 10:48:59
...
文章原创地址: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的首页查看图片轮播效果,这里是源代码。