Finishing a bit tonight, the class album to get a bit, add a thumbnail, version is a bit ugly, the next version of the update it.
1
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Big Fat </title>
<style type= "Text/css" >
div{margin:0px Auto;}
. box{width:800px;height:530px;overflow:hidden;border-radius:10px;}
. thum{height:200px;width:1500px;margin-top:50px;}
ul{list-style:none;margin:0px;padding:0px;}
Li{float:left;}
. Thumbs_none{opacity:0.6;filter:alpha (opacity=40);}
</style>
<script type= "Text/javascript" >
Define a variable to control the global timer
var times;
Window.onload=function () {
Controlling Timers with variables
Times = setinterval (' lb () ', 1000);
}
Picture Carousel Method
var i=2;
function lb () {
Get src attribute Change picture path
var info = document.getElementById ("img");
var Thu=document.getelementbyid ("thumbs");
var li_list=document.getelementsbytagname ("Li");
for (var j = 1; j<li_list.length;j++) {
Add transparent styles to all thumbnails
Li_list[j].classname= "Thumbs_none";
Match thumbnail sync remove transparency
if (j==i) {
Li_list[j].classname= "";
}
}
Remove transparency Style
Thu.classname= "";
Info.src= "./" +i+ ". JPG ";
Return to zero when i+1 reaches maximum number after operation
i++;
if (i>23) {
I=1;
}
}
Mouse over stop
function Stop () {
Cleaning timers
Clearinterval (times);
}
Mouse left to continue carousel
function again () {
When you clear the timer, you need to clear this too. Otherwise two runs will overlap
Times = setinterval (' lb () ', 1000);
}
</script>
<body>
<div class= "box" >
<ul><li></li> </ Ul> </div>
<div class= "Thum" >
<ul class= "TBS" >
<!--here is no use JS temporarily do not write the next version and then improve-
<li class= "" > </li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
<li class= "Thumbs_none" ></li>
</ul>
</div>
</body>
As follows:
Online Demo Address: http://bbqwifi.info/php/show/But there seems to be a bit of delay after uploading pictures, so don't mind.
Html+css+javascript Web Albums "thumbnail"
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
