<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#outDiv{
width:590px;
height:460px;
border:1px solid #000;
position:relative;
margin-left:20px;
margin-top:20px;
overflow:hidden;
}
#outDiv ul{
width:9999px;
height:460px;
position:absolute;
}
#outDiv ul li{
float:left;
}
#leftBtn, #rightBtn{
position:absolute;
width:60px;
height:60px;
display:block;
background-color:#333;
top:200px;
opacity:0.6;
filter:alpha(opacity=60);
-moz-border-radius: 60px; /* Gecko browsers */
-webkit-border-radius: 60px; /* Webkit browsers */
border-radius:60px; /* W3C syntax - likely to be standard so use for future proofing */
/* http://fetchak.com/ie-css3/ ,用于兼容IE的css3属性,可以试试*/
}
#leftBtn{
left:-60px; /*30px*/
}
#rightBtn{
right:-60px; /*30px*/
}
#leftBtn b, #rightBtn b{
color:#fff;
position:absolute;
left:24px;
top:20px;
font-size:24px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="outDiv">
<ul>
<li><a><img src="img1.jpg" /></a></li>
<li><a><img src="img2.jpg" /></a></li>
</ul>
<div id="leftBtn">
<b><</b>
</div>
<div id="rightBtn">
<b>></b>
</div>
</div>
<div id="test"></div>
<div id="a"></div>
<script>
/*
* 仿天猫品牌街,无缝滚动广告;
* ie8, ff, opera 中测试通过,其余浏览器未测
* *****made by keimon*******
* *******2013-01-10********
*/
$(function(){
var timer;
var outWidth = $('#outDiv').width(); //外部div的宽度
$('ul').html($('ul').html()+$('ul').html()); //ul中的li翻倍;
function roll(){
if(parseInt($('ul').css('left'))==-(outWidth*2)){
$('ul').css('left',0)
}
$('ul').animate({left: '-=' + outWidth+'px'},'slow');
timer = setTimeout(function(){
roll();
},3000)
}
roll();
//点击左边按钮
$('#leftBtn').click(function(){
clearTimeout(timer);
if(parseInt($('ul').css('left'))==-(outWidth*2)){
$('ul').css('left',0)
}
$('ul').stop(false,true).animate({left:'-=' + outWidth+'px'},'fast')
})
//点击右边按钮
$('#rightBtn').click(function(){
clearTimeout(timer);
if(parseInt($('ul').css('left'))==0){
$('ul').css('left',-(4*outWidth))
}
$('ul').animate({left:'+=' + outWidth+'px'},'fast')
})
//当鼠标移入外部div框时,按钮移入
$('#outDiv').hover(function(){
clearTimeout(timer);
$('#leftBtn').animate({left:'30px'},'slow');
$('#rightBtn').animate({right:'30px'},'slow');
},function(){
$('#leftBtn').animate({left:'-60px'},'slow');
$('#rightBtn').animate({right:'-60px'},'slow');
timer = setTimeout(function(){
roll();
},3000)
})
//当鼠标移入按钮时,按钮颜色发生变化;
$('#leftBtn').add($('#rightBtn')).hover(function(){
$('#leftBtn').add($('#rightBtn')).css('backgroundColor','#900');
},function(){
$('#leftBtn').add($('#rightBtn')).css('backgroundColor','#333');
})
})
</script>
</body>
</html>