標籤：style http color java os io for cti
<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
