<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{padding:0;margin:0;}
ul,li{list-style:none;}
.wrap{position: relative;width:200px;height:150px;border:2px solid #ddd;margin:50px auto;overflow:hidden;}
.photo{position:absolute;left:0;top:0;}
.photo li{width:200px;height:150px;float:left;}
</style>
<body>
<div class="wrap">
<ul class="photo">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script>
$(function(){
//定义颜色
var colorArray = ['pink','red','orange'];
var photoLi = $('.photo li');
//定义图片个数
var photoLen = photoLi.length;
for( var i=0 ; i < photoLen ; i++ ){
photoLi.eq(i).css('background',colorArray[i] );
}
//定义单个li的宽
var firstLiWidth = photoLi.eq(0).width();
//定义photo的宽度来撑开
$('.photo').width( firstLiWidth * photoLen );
//定义两个计数器
var num=0;
var num2=0;
//移动开始
setInterval(photoMove,2000);
//移动函数
function photoMove(){
//当 num 等于图片个数减1的时候
if (num == photoLen-1) {
//第一个计数器为0来保持循环
num = 0;
//当第一个计数器等于0的时候那么就是开始位置的时候第一张图片就变成相对定位，然后排到了尾部
photoLi.eq(0).css({
position:'relative',
left : $('.photo').width() + 'px'
});
}else{
num ++;
}
num2++;
//num2是控制图片滚动的位置
$('.photo').animate({left:-num2 * firstLiWidth +'px'}, 1000,function(){
//回调函数的作用在于等num2等于图片个数的时候那么让第一张图片定位变成默认状态，photo的 left 也回到0px位置,num2又设为0
if (num2 == photoLen) {
photoLi.eq(0).css('position', 'static');
$('.photo').css('left',0);
num2 = 0;
}
})
}
});
</script>
2096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
