<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
.all{
width: 960px;
height:540px;
margin:50px auto;
position: relative;
font-size: 0px;
overflow:hidden;
}
.chunk_left{
width:50px;
height:100px;
text-align: center;
background:rgba(255,255,255,0.2);
font-size: 30px;
position: absolute;
top:50%;
left:0;
cursor:pointer;
}
.chunk_right{
width:50px;
height:100px;
text-align: center;
background:rgba(255,255,255,0.2);
font-size: 30px;
position: absolute;
top:50%;
right:0;
cursor:pointer;
}
span{
line-height:100px;
}
li{
list-style:none;
width: 10px;
height:10px;
border-radius:50%;
border:4px solid white;
float: left;
margin-left:30px;
cursor:pointer;
}
ul{
position: absolute;
bottom: 50px;
left: 37%;
}
img{
width: 960px;
height:540px;
display: none;
}
.bc{background-color: white;}
.act{display:block;}
</style>
</head>
<body>
<div class="all">
<img src="images/q.jpg" alt="" class="act">
<img src="images/w.jpg" alt="" >
<img src="images/e.jpg" alt="">
<img src="images/r.jpg" alt="">
<div class="chunk_left" id="chunk_one"><span><</span></div>
<div class="chunk_right" id="chunk_two"><span>></span></div>
<ul>
<li class="bc"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var li_=document.getElementsByTagName('li');
var Img=document.getElementsByTagName('img');
var chgl=document.getElementById('chunk_one');
var chgr=document.getElementById('chunk_two');
var num=0;
for(i=0;i<li_.length;i++){
li_[i].index=i;
li_[i].onmouseover=adc;
function adc() {
for(h=0;h<li_.length;h++){
li_[h].className='';
Img[h].className='';
}
this.className='bc';
Img[this.index].className='act';
clearInterval(times)
}
li_[i].onmouseout=function () {
times=setInterval(move,2000);
}
}
chgr.onclick=move;
times=setInterval(move,2000);
function move() {
for( k=0;k<Img.length;k++){
if(Img[k].className=='act'){
num=k+1;
for(y=0;y<Img.length;y++){
Img[y].className=''
}
for(y=0;y<Img.length;y++){
li_[y].className=''
}
if(num==4) {
k=-1
}
li_[k+1].className='bc';
Img[k+1].className='act';
break;
}
}
}
chgl.onclick=function () {
for( k=0;k<Img.length;k++){
if(Img[k].className=='act'){
num=k-1;
for(y=0;y<Img.length;y++){
Img[y].className=''
}
for(y=0;y<Img.length;y++){
li_[y].className=''
}
if(num==-1){k=Img.length}
Img[k-1].className='act';
li_[k-1].className='bc';
break;
}
}}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
.all{
width: 960px;
height:540px;
margin:50px auto;
position: relative;
font-size: 0px;
overflow:hidden;
}
.chunk_left{
width:50px;
height:100px;
text-align: center;
background:rgba(255,255,255,0.2);
font-size: 30px;
position: absolute;
top:50%;
left:0;
cursor:pointer;
}
.chunk_right{
width:50px;
height:100px;
text-align: center;
background:rgba(255,255,255,0.2);
font-size: 30px;
position: absolute;
top:50%;
right:0;
cursor:pointer;
}
span{
line-height:100px;
}
li{
list-style:none;
width: 10px;
height:10px;
border-radius:50%;
border:4px solid white;
float: left;
margin-left:30px;
cursor:pointer;
}
ul{
position: absolute;
bottom: 50px;
left: 37%;
}
img{
width: 960px;
height:540px;
display: none;
}
.bc{background-color: white;}
.act{display:block;}
</style>
</head>
<body>
<div class="all">
<img src="images/q.jpg" alt="" class="act">
<img src="images/w.jpg" alt="" >
<img src="images/e.jpg" alt="">
<img src="images/r.jpg" alt="">
<div class="chunk_left" id="chunk_one"><span><</span></div>
<div class="chunk_right" id="chunk_two"><span>></span></div>
<ul>
<li class="bc"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var li_=document.getElementsByTagName('li');
var Img=document.getElementsByTagName('img');
var chgl=document.getElementById('chunk_one');
var chgr=document.getElementById('chunk_two');
var num=0;
for(i=0;i<li_.length;i++){
li_[i].index=i;
li_[i].onmouseover=adc;
function adc() {
for(h=0;h<li_.length;h++){
li_[h].className='';
Img[h].className='';
}
this.className='bc';
Img[this.index].className='act';
clearInterval(times)
}
li_[i].onmouseout=function () {
times=setInterval(move,2000);
}
}
chgr.onclick=move;
times=setInterval(move,2000);
function move() {
for( k=0;k<Img.length;k++){
if(Img[k].className=='act'){
num=k+1;
for(y=0;y<Img.length;y++){
Img[y].className=''
}
for(y=0;y<Img.length;y++){
li_[y].className=''
}
if(num==4) {
k=-1
}
li_[k+1].className='bc';
Img[k+1].className='act';
break;
}
}
}
chgl.onclick=function () {
for( k=0;k<Img.length;k++){
if(Img[k].className=='act'){
num=k-1;
for(y=0;y<Img.length;y++){
Img[y].className=''
}
for(y=0;y<Img.length;y++){
li_[y].className=''
}
if(num==-1){k=Img.length}
Img[k-1].className='act';
li_[k-1].className='bc';
break;
}
}}
</script>
</body>
</html>