This chapter records the simple picture carousel function, needs the HTML, the JS and the CSS Common Realization 1, the HTML file
<! DOCTYPE html>
2, CSS Outreach style
* * * An elliptical translucent background * * *
/#imgyuan {
width:182px;
height:20px;
border-radius:12px;
background-color:red;
padding-left:13px;
margin:0 Auto;
position:relative;
Top: -40px;
Background-color:rgba (1, 0, 0.3);
* * * Every small dot * * * * * */
#imgyuan font{
border:1px solid white;
width:11px;
height:11px;
border-radius:50%;
margin-right:9px;
margin-top:4px;
Display:block;
Float:left;
Background-color:white;
}
3, JS file
var index=0;//the subscript for each picture, window.onload=function () {var start=setinterval (autoplay,1000);//Start the Carousel, change one map per second $ (' I
Mgchangediv '). Onmouseover=function () {//When the mouse cursor is over the picture, stop the Carousel clearinterval (start);
} $ (' Imgchangediv '). Onmouseout=function () {//When the mouse cursor is over the picture, start the Carousel Start=setinterval (autoplay,1000);
The Var lis=$ (' Imgyuan '). getElementsByTagName (' font ');//Get all circles//when moving to the circle, then the corresponding picture var funny = function (i) {
Lis[i].onmouseover = function () {changeimg (i)}} for (Var i=0;i<lis.length;i++) {
Funny (i);
}///after round, or second round function autoplay () {if (index>7) {index=0;
} changeimg (index++);
//corresponds to the circle and picture synchronization function changeimg (index) {var list=$ (' Imgchangediv '). getElementsByTagName (' img ');
var list1=$ (' Imgyuan '). getElementsByTagName (' font ');
for (i=0;i<list.length;i++) {list[i].style.display= ' none ';
list1[i].style.backgroundcolor= ' White '; } LIST[INDEX].STYLE.DISPLAy= ' block ';
List1[index].style.backgroundcolor= ' Red '; }
4, feature screenshot