Home > Developer > JavaScript
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Focus Carousel Map </title>
<style type= "Text/css" >
*{margin:0; padding:0; text-decoration:none;}
body {padding:20px;}
#container {width:600px; height:400px; border:3px solid #333; overflow:hidden; position:relative;}
#list {width:4200px; height:400px; position:absolute; z-index:1;}
#list img {float:left;width:600px;display:block;}
#buttons {position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:250px;}
#buttons span {cursor:pointer; float:left; border:1px solid #fff; width:10px; height:10px; border-radius:50%; backg Round: #333; margin-right:5px;}
#buttons. on {background:orangered;}
. arrow {cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px; font-weight:bold; width: 40px; height:40px; Position:absolute; Z-index:2; top:180px; Background-color:rgba (0,0,0,.3); Color: #fff;}
. arrow:hover {Background-color:rgba (0,0,0,.7);}
#container: hover. Arrow {Display:block;}
#prev {left:20px;}
#next {right:20px;}
</style>
<body>
<div id= "Container" >
<div id= "list" style= "left: -600px;" >
</div>
<div id= "Buttons" >
<span index= "1" class= "on" ></span>
<span index= "2" ></span>
<span index= "3" ></span>
<span index= "4" ></span>
<span index= "5" ></span>
</div>
<a href= "javascript:;" id= "prev" class= "Arrow" ><</a>
<a href= "javascript:;" id= "Next" class= "Arrow" >></a>
</div>
</body>
<script type= "Text/javascript" >
Window.onload = function () {
var container = document.getElementById (' container ');
var list = document.getElementById (' list ');
var prev = document.getElementById (' prev ');
var next = document.getElementById (' Next ');
var buttons = document.getElementById (' buttons '). getElementsByTagName (' span ');
var width = parseint (list.getelementsbytagname (' img ') [0].offsetwidth, 10);
var num = 5;
var index = 1;
var intervaltime = 3000;
var autotimer = null;
var gotimer = 0;
function showbtn () {
for (var i = 0, L = buttons.length; i < L; i++) {
if (Buttons[i].classname = = ' on ') {
Buttons[i].classname = ";
Break
}
}
Buttons[index-1].classname = ' on ';
}
function Animation (offwidth) {
Cleartimeout (Gotimer);
Motion Effect
var listleft = parseint (List.style.left, 10);
var timer = +, TTL = +, speed = (offwidth-listleft)/(TIMER/TTL);
function Go () {
List.style.left = (Speed > 0?) Math.min:Math.max) (parseint (list.style.left) + speed, offwidth) + ' px ';
Gotimer = SetTimeout (go, TTL);
if (parseint (List.style.left, ten) = = Offwidth) {
Cleartimeout (Gotimer);
}
}
Go ();
}
function AutoPlay () {
Autotimer = SetTimeout (function () {
Next.onclick ();
AutoPlay ();
}, IntervalTime);
}
function Stopplay () {
Cleartimeout (Autotimer);
}
Next.onclick = function () {
if (index >= num) {
index = 1;
}else{
index++;
}
SHOWBTN ();
Animation (index* (-width));
};
Prev.onclick = function () {
if (index <= 1) {
index = 5;
}else{
index--;
}
SHOWBTN ();
Animation (index* (-width));
};
for (var i = 0, L = buttons.length; i < L; i++) {
Buttons[i].onclick = function () {
if (This.classname = = ' on ') {//If it is currently selected Click Exit
Return
}
var myindex = parseint (This.getattribute (' index '));
var offset = Myindex * (-width);
Animation (offset);
index = myindex;//re-assigns the index value
SHOWBTN ();
};
}
AutoPlay ();
Container.onmouseover = Stopplay;
Container.onmouseout = AutoPlay;
}
</script>
Primary javascript-focus map to be optimized
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
