<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
ul{
list-style: none;
}
#div1{
100%;
overflow: hidden;
position: relative;
}
#div1 img{
100%;
}
.ul1{
position: absolute;
top:40%;
100%;
}
.ul1 li{
25px;
height: 50px;
}
.ul1 li div{
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.ul1 #prev{
float: left;
margin-left: 10%;
}
.ul1 #prev div{
border-right: 25px solid white;
}
.ul1 #next{
float: right;
margin-right: 10%;}
.ul1 #next div{
border-left: 25px solid white;
}
.ul2{
position: absolute;
bottom: 10px;
left: 40%;
}
.ul2 li{
float: left;
20px;
height: 20px;
border-radius: 10px;
margin-right: 10px;
}
.ul2 li.black{
background: rgba(86,86,86,0.8);
}
.ul2 li.orange{
background: rgba(248,114,6,0.8);
}
</style>
</head>
<body>
<div id="div1">
<img src="Images/banner_1.jpg" alt="" title="" id="img1" />
<ul class="ul1">
<li id="prev">
<div></div>
</li>
<li id="next">
<div></div>
</li>
</ul>
<ul class="ul2" id="page">
</ul>
</div>
<script>
var div1,imgs,prev,next,ul2,lis,index=0;
//存放图片
var arr=[{id:1,src:"Images/banner_1.jpg",title:"",href:""},
{id:2,src:"Images/banner_2.jpg",title:"",href:""},
{id:3,src:"Images/banner_3.jpg",title:"",href:""},
{id:4,src:"Images/banner_longtou.jpg",title:"",href:""}];
var timer=null;
window.onload=function(){
div1=document.getElementById("div1");
imgs=div1.getElementsByTagName("img")[0];
prev=document.getElementById("prev");
next=document.getElementById("next");
ul2=document.getElementById("page");
//创建小点元素
for(var i=0,len=arr.length;i<len;i++){
var li=document.createElement("li");
li.className="black";
li.value=i;
li.onclick=liClick;
ul2.appendChild(li);
}
lis=ul2.getElementsByTagName("li");
lis[0].className="orange";
prev.onclick=prevCLick;
next.onclick=nextClick;
timer=setInterval(auto,3000);
}
//自动改变索引
function auto(){
index++;
if(index==arr.length){
index=0;
}
show();
}
//切换图片按钮颜色
function show(){
imgs.src=arr[index].src;
for(var i=0,len=lis.length;i<len;i++){
lis[i].className="black";
}
lis[index].className="orange";
}
function prevCLick(){
clearInterval(timer);
index--;
if(index<0){
index=arr.length-1;
}
show();
timer=setInterval(auto,3000);
}
function nextClick(){
clearInterval(timer);
index++;
if(index==arr.length){
index=0;
}
show();
timer=setInterval(auto,3000);
}
function liClick(){
clearInterval(timer);
index=this.value;
show();
timer=setInterval(auto,3000);
}
</script>
</body>
</html>