#banner {position:relativewidth:1070pxheight:280pxoverflow:hiddenmargin:0 auto}
#banner_list img {border:0px}
#banner_bg {position:absolutebottom:0background-color:#000height:30pxfilter: Alpha(Opacity=30)opacity:0.3z-index:1000
cursor:pointerwidth:478px}
#banner_info{position:absolutebottom:0left:5pxheight:22pxcolor:#fffz-index:1001cursor:pointer}
#banner_text {position:absolutewidth:120pxz-index:1002right:3pxbottom:3px}
#banner ul {position:absolutelist-style-type:nonefilter: Alpha(Opacity=80)opacity:0.8border:1px solid #fffz-index:1002
margin:0padding:0bottom:3pxright:5px}
#banner ul li { padding:0px 8pxfloat:leftdisplay:blockcolor:#FFFborder:#e5eaff 1px solidbackground:#6f4f67cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute} <!-- 让四张图片都可以重叠在一起-->
</style>
<script src="../jquery.js" type="text/javascript"></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>
========================以上是CSS和脚本=======================
<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/jsbg1.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="../images/jsbg2.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="../images/jsbg3.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="../images/jsbg4.jpg" title="" alt="" /></a>
</div>
</div>
图片在哪里放，你应该看的很清楚吧，
<!DOCTYPE HTML><html>
<head>
<link rel="stylesheet" type="text/css" href="./css/init2.css">
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/test2.js"></script>
</head>
<body>
<div id="layout">
<header class="clearfix">
<div id="banner">
<ul id="banner_img">
<li><img src="./img/s1.jpg"></li>
<li><img src="./img/s2.jpg"></li>
<li><img src="./img/s3.jpg"></li>
</ul>
</div>
</header>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）