<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="京东，轮播">
<meta name="Description" content="京东首页轮播图">
<title>京东</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
#flash {
margin: 100px auto;
width: 590px;
height: 470px;
overflow: hidden;
position: relative;
}
#pic li{
position: absolute;
left: 0;
top: 0;
display: none;
}
#doc {
width: 100px;
height: 26px;
background-color: rgba(0,0,0,0.7);
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%);
border-radius: 15px;
}
#doc li {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgba(255,255,255,0.9);
float: left;
margin: 5px 9px;
}
#doc .on {
background-color: red;
}
#btn li {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
line-height: 28px;
color: #fff;
font-weight: 700;
display: none;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
#flash:hover #btn li{
display: block;
}
#flash:hover,#btn li:hover,#doc li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="flash">
<ul id="pic">
<li style="display: block;"><img src="data:images/1531057087.jpg" alt="京东"></li>
<li><img src="data:images/1531057087(1).jpg" alt="京东"></li>
<li><img src="data:images/1531057087(2).jpg" alt="京东"></li>
</ul>
<ul id="doc">
<li class="on"></li>
<li></li>
<li></li>
</ul>
<ul id="btn">
<li id="prev"><</li>
<li id="next">></li>
</ul>
</div>
<script>
window.onload=function(){
var flash=document.getElementById("flash");
var pic=document.getElementById("pic");
var p_lis=pic.getElementsByTagName("li");
var doc=document.getElementById("doc");
var d_lis=doc.getElementsByTagName("li");
var timer=null;
var index=0;
var left=document.getElementById("prev");
var right=document.getElementById("next"); //设置定时器
timer=setInterval(run, 2000);
//自动放
function run(){
index++;
if(index>=p_lis.length) {index=0;}
changeImage(index);
}
flash.onmouseover=function() {
clearInterval(timer);
}
flash.onmouseout=function() {
timer=setInterval(run,2000);
}
for (var i = 0; i <d_lis.length; i++) {
d_lis[i].id=i;
//鼠标在小圆点上
d_lis[i].onmouseover=function(){
clearInterval(timer);
changeImage(this.id);
}
}
left.onclick=function() {
index--;
if(index<0){
index=p_lis.length-1;
}
changeImage(index);
}
right.onclick=function() {
index++;
if(index>p_lis.length-1){
index=0;
}
changeImage(index);
}
function changeImage(currindex){
for (var i = 0; i < p_lis.length; i++) {
p_lis[i].style.display="none";
d_lis[i].className="";
}
p_lis[currindex].style.display="block";
d_lis[currindex].className="on";
// index=currindex;
} }
</script>
</body> </html>