图片轮播html1001无标题,HTML图片轮播代码怎么写？

网上看到的，希望对你有用~

HTML:

Document

var t = n = 0,

count;

$(document).ready(function() {

// 获取图片标签长度

count = $("#banner_list a").length;

// 不是当前显示的图片隐藏

$("#banner_list a:not(:first-child)").hide();

// 点击下面的1234按钮，切换图片

$("#banner li").click(function() {

var i = $(this).text() - 1;

n = i;

if (i >= count) return;

// 淡入淡出效果

$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

// 响应点击

$(this).toggleClass("on");

// 切换按钮的时候让上一个按钮回归原来的样式

$(this).siblings().removeAttr("class");

});

t = setInterval("showAuto()", 4000);

$("#banner").hover(function() {

clearInterval(t)

},

function() {

t = setInterval("showAuto()", 4000);

});

})

// 自动轮播

function showAuto() {

n = n >= (count - 1) ? 0 : ++n;

$("#banner li").eq(n).trigger('click');

}

• 1

• 2

• 3

• 4





CSS：

#banner {

position: relative;

width: 478px;

height: 286px;

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;

}

#banner ul {

position: absolute;

list-style-type: none;

filter: Alpha(Opacity=80);

opacity: 0.8;

z-index: 1002;

margin: 0;

padding: 0;

bottom: 3px;

right: 5px;

}

#banner ul li {

padding: 0px 8px;

float: left;

display: block;

color: #FFF;

background: #6f4f67;

cursor: pointer;

border: 1px solid #333;

}

#banner ul li.on {

background-color: #000;

}

#banner_list a {

position: absolute;

}