<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin:0;
padding:0;
}
#box{
margin-top:100px;
width:100%;
background:#ccc url(images/0.jpg) no-repeat center top;
}
#pic{
margin:0 auto;
width:1500px;
height:600px;
overflow:hidden;
position:relative;
}
#pic img{
position:absolute;
right:-600px;
width:600px;
height:600px;
}
#sLeft,#sRight{
position:absolute;
width:40px;
height:60px;
background:#333;
display:block;
top:250px;
font-size:40px;
line-height:60px;
color:#fff;
text-align:center;
cursor:pointer;
}
#sLeft{
left:900px;
}
#sRight{
right:0;
}
#list{
position:absolute;
right:250px;
bottom:30px;
}
#list li{
float:left;
width:20px;
height:20px;
border-radius:50%;
background:red;
margin-left:5px;
list-style:none;
}
</style>
</head>
<body>
<div id="box">
<div id="pic">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/4.jpg" />
<span id="sLeft"><</span>
<span id="sRight">></span>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
var oPic=document.getElementById('pic');
var aImg=oPic.getElementsByTagName('img');
var sLeft=document.getElementById('sLeft');
var sRight=document.getElementById('sRight');
var oList=document.getElementById('list');
var oLi=oList.getElementsByTagName('li');//获取元素节点
var index=0;//轮播图整个过程以全局变量index作为索引值贯穿始终
aImg[3].style.right=0+'px';
oLi[3].style.backgroundColor='white';//在轮播前写入一次样式,避免刷新时无图的bug;
var Timer=setInterval(carousel,1000);//执行定时器,让图片轮播且列表当前li变颜色
for(var j=0;j<oLi.length;j++){
oLi[j].index=j;
oLi[j].οnclick=function(){//点击 结束定时器 li背景变白,跳转到当前图片 点击完毕重新执行定时器
index=this.index; //这里的index执行全局索引功能
clearInterval(Timer);
for(var i=0;i<aImg.length;i++){//清空效果样式
aImg[i].style.right=-600+'px';
oLi[i].style.backgroundColor='red';
}
aImg[this.index].style.right=0+'px'; //给当前添加效果
oLi[this.index].style.backgroundColor='white';
Timer=setInterval(carousel,1000); //点击结束 执行定时器
}
}
sLeft.οnclick=function(){
clearInterval(Timer);
//alert(index);
for(var i=0;i<aImg.length;i++){ //清空效果
aImg[i].style.right=-600+'px';
oLi[i].style.backgroundColor='red';
}
index--; // index--
if(index<=0){ //索引值为0时,规定为4
index=4;
}
aImg[index-1].style.right=0+'px'; //效果
oLi[index-1].style.backgroundColor='white';
Timer=setInterval(carousel,1000);
}
sRight.οnclick=function(){ //点击 结束定时器 跳转下一张图片,当前li变白色 结束当前 清空效果 点击结束 执行定时器
clearInterval(Timer);
//alert(index);
for(var i=0;i<aImg.length;i++){
aImg[i].style.right=-600+'px';
oLi[i].style.backgroundColor='red';
}
if(index>=4){
index=0;
}
index++;
aImg[index-1].style.right=0+'px';
oLi[index-1].style.backgroundColor='white';
Timer=setInterval(carousel,1000);
}
function carousel(){
for(var i=0;i<aImg.length;i++){//清空之前js添加的css样式(改变图片的right及li的背景色)
aImg[i].style.right=-600+'px';
oLi[i].style.backgroundColor='red';
}
if(index==4){
index=0;
}
aImg[index].style.right=0+'px';//给当前的图片添加right值,使其显示
oLi[index].style.backgroundColor='white';//给当前li添加背景白色
index++;
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin:0;
padding:0;
}
#box{
margin-top:100px;
width:100%;
background:#ccc url(images/0.jpg) no-repeat center top;
}
#pic{
margin:0 auto;
width:1500px;
height:600px;
overflow:hidden;
position:relative;
}
#pic img{
position:absolute;
right:-600px;
width:600px;
height:600px;
}
#sLeft,#sRight{
position:absolute;
width:40px;
height:60px;
background:#333;
display:block;
top:250px;
font-size:40px;
line-height:60px;
color:#fff;
text-align:center;
cursor:pointer;
}
#sLeft{
left:900px;
}
#sRight{
right:0;
}
#list{
position:absolute;
right:250px;
bottom:30px;
}
#list li{
float:left;
width:20px;
height:20px;
border-radius:50%;
background:red;
margin-left:5px;
list-style:none;
}
</style>
</head>
<body>
<div id="box">
<div id="pic">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/4.jpg" />
<span id="sLeft"><</span>
<span id="sRight">></span>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
var oPic=document.getElementById('pic');
var aImg=oPic.getElementsByTagName('img');
var sLeft=document.getElementById('sLeft');
var sRight=document.getElementById('sRight');
var oList=document.getElementById('list');
var oLi=oList.getElementsByTagName('li');//获取元素节点
var index=0;//轮播图整个过程以全局变量index作为索引值贯穿始终
aImg[3].style.right=0+'px';
oLi[3].style.backgroundColor='white';//在轮播前写入一次样式,避免刷新时无图的bug;
var Timer=setInterval(carousel,1000);//执行定时器,让图片轮播且列表当前li变颜色
for(var j=0;j<oLi.length;j++){
oLi[j].index=j;
oLi[j].οnclick=function(){//点击 结束定时器 li背景变白,跳转到当前图片 点击完毕重新执行定时器
index=this.index; //这里的index执行全局索引功能
clearInterval(Timer);
for(var i=0;i<aImg.length;i++){//清空效果样式
aImg[i].style.right=-600+'px';
oLi[i].style.backgroundColor='red';
}
aImg[this.index].style.right=0+'px'; //给当前添加效果
oLi[this.index].style.backgroundColor='white';
Timer=setInterval(carousel,1000); //点击结束 执行定时器
}
}
sLeft.οnclick=function(){
clearInterval(Timer);
//alert(index);
for(var i=0;i<aImg.length;i++){ //清空效果
aImg[i].style.right=-600+'px';
oLi[i].style.backgroundColor='red';
}
index--; // index--
if(index<=0){ //索引值为0时,规定为4
index=4;
}
aImg[index-1].style.right=0+'px'; //效果
oLi[index-1].style.backgroundColor='white';
Timer=setInterval(carousel,1000);
}
sRight.οnclick=function(){ //点击 结束定时器 跳转下一张图片,当前li变白色 结束当前 清空效果 点击结束 执行定时器
clearInterval(Timer);
//alert(index);
for(var i=0;i<aImg.length;i++){
aImg[i].style.right=-600+'px';
oLi[i].style.backgroundColor='red';
}
if(index>=4){
index=0;
}
index++;
aImg[index-1].style.right=0+'px';
oLi[index-1].style.backgroundColor='white';
Timer=setInterval(carousel,1000);
}
function carousel(){
for(var i=0;i<aImg.length;i++){//清空之前js添加的css样式(改变图片的right及li的背景色)
aImg[i].style.right=-600+'px';
oLi[i].style.backgroundColor='red';
}
if(index==4){
index=0;
}
aImg[index].style.right=0+'px';//给当前的图片添加right值,使其显示
oLi[index].style.backgroundColor='white';//给当前li添加背景白色
index++;
}
</script>
</body>
</html>