Home > Developer > Web Develop
<!doctype html>
<meta charset= "UTF-8" >
<title></title>
<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>
<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<script>
$ (function () {
Define Color
var colorarray = [' Pink ', ' red ', ' orange '];
var Photoli = $ ('. Photo Li ');
Define the number of pictures
var photolen = photoli.length;
for (var i=0; i < Photolen; i++) {
Photoli.eq (i). CSS (' background ', colorarray[i]);
}
Defines the width of a single Li
var firstliwidth = photoli.eq (0). width ();
Define the width of the photo to open
$ ('. Photo '). Width (firstliwidth * photolen);
Define two counters
var num=0;
var num2=0;
Move start
SetInterval (photomove,2000);
Move function
function Photomove () {
When Num equals the number of pictures minus 1
if (num = = photoLen-1) {
//The first counter is kept in circulation for the zero
num = 0;
When the first counter is equal to 0, then the first picture becomes the relative position and then the tail is placed.
Photoli.eq (0). css ({
Position: ' Relative ',
Left: $ ('. Photo '). Width () + ' px '
});
}else{
num + +;
}
num2++;
Num2 is the position that controls the scrolling of the picture
$ ('. Photo '). Animate ({left:-num2 * firstliwidth + ' px '}, 1000,function () {
The function of the callback function is that when the num2 equals the number of images, so that the first image positioning to become the default state, photo's left also back to 0px position, num2 is set to 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
