<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
*{ padding:0; margin:0; list-style:none;}
img{ display:block;}
.scroll{ width:400px;height:307px; border:5px solid #ccc; margin:100px auto; position:relative;}
.show{ position:relative; width:400px;height:307px; overflow:hidden; }
.showIn{ width:9999px; position:absolute; left:0; top:0;}
.showIn li{ float:left;}
.btnright,.btnleft{ width:52px;height:52px; background:url(images/niao/arr.png) no-repeat; position:absolute; top:50%; margin-top:-26px; left:-21px; cursor:pointer;}
.btnright{ right:-21px; left:auto; background:url(images/niao/arr.png) no-repeat right top;}
.scroll ol{ position:absolute; bottom:-26px;left:50%; margin-left:-69px; width:138px;}
.scroll ol li{ width:13px;height:13px; background:url(images/niao/00.png) no-repeat; float:left; margin:0 5px; cursor:pointer;}
.scroll ol li.current{ background:url(images/niao/00.png) no-repeat left bottom;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var num = 0;
var num02 = 0;
var timer;
var imgWidth = $('.product').width();
var len = $('.product').length;
/*角标的工作*/
$('.scroll ol li').click(function(e) {
$(this).addClass('current').siblings().removeClass('current')
var selfIndex = $(this).index()
$('.scroll ul').stop().animate({'left':selfIndex*-imgWidth},500)
num = selfIndex;
num02 = selfIndex;
});
/*自动播放功能*/
function autoplay(){
num++;
num02++;
if(num > (len - 1)){
num=1
$('.scroll ul').css('left',0);
}
if(num02> (len - 2)){
num02=0
}
$('.scroll ul').stop().animate({'left':num*-imgWidth},500)
$('.scroll ol li').eq(num02).addClass('current').siblings().removeClass('current')
}
timer = setInterval(autoplay,2000)
/*按钮*/
$('.btnright').click(function(e) {
autoplay()
});
$('.btnleft').click(function(e) {
num--;
num02--;
if(num<0){
num=len-2;
$('.scroll ul').css('left',-(len-1)* imgWidth)
}
if(num02<0){
num02= len - 2;
}
$('.scroll ul').stop().animate({'left':num*-imgWidth},500)
$('.scroll ol li').eq(num02).addClass('current').siblings().removeClass('current')
});
/*鼠标移上关闭定时器*/
$('.scroll').hover(function(){
clearInterval(timer)
},function(){
timer = setInterval(autoplay,2000)
})
})
</script>
</head>
<body>
<div class="scroll">
<div class="show">
<ul class="showIn">
<li><img src="images/niao/01.jpg" width="400" height="307" class="product"/></li>
<li><img src="images/niao/02.jpg" width="400" height="307" class="product"/></li>
<li><img src="images/niao/03.jpg" width="400" height="307" class="product"/></li>
<li><img src="images/niao/04.jpg" width="400" height="307" class="product"/></li>
<li><img src="images/niao/05.jpg" width="400" height="307" class="product"/></li>
<li><img src="images/niao/06.jpg" width="400" height="307" class="product"/></li>
<li><img src="images/niao/01.jpg" width="400" height="307" class="product"/></li>
</ul>
</div>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<span class="btnleft"></span>
<span class="btnright"></span>
</div>
</body>
</html>
轮播图无缝滚动 ul的left值改变
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1 添加第一张图片 oUl.appenChild(lis[0].cloneNode(true))2.for.遍历 ...
- 返回前面起第一个字符的位置 indexOf(“字符”); 它是从 前面开始数（从左边开始数）， 而且只找第一个， ...
