您的位置：首页 > Web前端 > JQuery

JQuery 轮播图片

2016-07-20 16:42 483 查看 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/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;
}

</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script>
<script type="text/javascript">
var t = n = 0, count;
$(document).ready(function () {
count = $("#banner_list a").length;
$("#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") });
$("#banner li").click(function () {
var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
n = i;
if (i >= count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('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("banner").style.background = "";
$(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');
}
</script>

</head>
<body>
<div id="banner">
<div id="banner_bg"></div>
<!--标题背景-->
<div id="banner_info"></div>
<!--标题-->
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="../images/p1.jpg" title="jquery1" alt="jquery1" /></a>
<a href="#" target="_blank"><img src="../images/p2.jpg" title="jquery2" alt="jquery2" /></a>
<a href="#" target="_blank"><img src="../images/p3.jpg" title="jquery3" alt="jquery3" /></a>
<a href="#" target="_blank"><img src="../images/p1.jpg" title="jquery4" alt="jquery4" /></a>
</div>
</div>

</body>
</html>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航