<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
*{margin:0;
padding:0;
List-style:none;}
. wrap{height:170px;
width:490px;
margin:60px Auto;
Overflow:hidden;
position:relative;
margin:100px Auto;}
. Wrap Ul{position:absolute;}
. Wrap ul li{height:170px;}
. Wrap Ol{position:absolute;
right:5px;
bottom:10px;}
. Wrap ol li{height:20px; width:20px;
Background: #ccc;
Border:solid 1px #666;
margin-left:5px;
Color: #000;
Float:left;
Line-height:center;
Text-align:center;
Cursor:pointer;}
. Wrap ol. On{background: #E97305;
Color: #fff;}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
var Wrap=document.getelementbyid (' Wrap '),
Pic=document.getelementbyid (' pic '). getElementsByTagName (' Li '),
List=document.getelementbyid (' list '). getElementsByTagName (' Li '),
Index=0,
Timer=null;
Timer = SetInterval (AutoPlay, 2000);
Stop AutoPlay When the mouse is over the entire container
Wrap.onmouseover = function () {
Clearinterval (timer);
}
Continue playing to the next one when the mouse leaves the entire container
Wrap.onmouseout = function () {
Timer = SetInterval (AutoPlay, 2000);
}
//define and invoke AutoPlay function
Function AutoPlay () {
Changepic (index);
index++;
if (index>=pic.length) {
Index = 0;
}
}
//define picture toggle function
Function changepic (index) {
for (var i =0;i<pic.length;i++) {
Pic[i].st Yle.display= "None";
List[i].classname= ";
}
pic[index].style.display= "block";
List[index].classname= ' on ';
}
//Traverse all digital navigation to switch to the corresponding picture
for (Var i=0;i<list.length;i++) {
List[i].onmouseover=function () {
Clearinterval (timer);
Index=this.innertext-1;
Changepic (index);
}
}
};
</script>
<body>
<div class= "wrap" id= ' wrap ' >
<ul id= "pic" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol id= "List" >
<li class= "on" >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
Focus Carousel Diagram
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
