<head>
<title>图片滚动 </title>
<style>
#div1 {position:relativewidth:650pxheight:210pxoverflow:hidden}
#div2{position:absolute}
li{float:leftlist-style-type:nonepadding:5px}
img{border:none}
a{position:relative}
</style>
<script>
window.onload=function()
{
var odiv2=document.getElementById('div2')
var ali=odiv2.getElementsByTagName('li')
var aspeed=-5
odiv2.innerHTML+=odiv2.innerHTML
odiv2.style.width=ali[0].offsetWidth*ali.length+'px'
setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+aspeed+'px'
if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
{
odiv2.style.left='0px'
}
},30)}
}
</script>
</head>
<body>
<div id='div1'>
<div id='div2'>
<li><a href=""><img src="1.jpg" /></a></li>
<li><a href=""><img src="2.jpg" /></a></li>
<li><a href=""><img src="3.jpg" /></a></li>
<li><a href=""><img src="4.jpg" /></a></li>
<!--这边你可以添加任意多的li，也就是你可以添加任意多的图片，使任意多的图片轮播-->
</div>
</div>
</body>
</html>
<style type="text/css">#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条）