<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style >
body{ margin:100px 300px;}
.bigcontainer{width:600px; height:400px ;position:relative; overflow:hidden;}
.imgcontainer{width:4200px;position:absolute;left:-600px; }
.imgcontainer>img{ float:left;}
.button{position:absolute; left:200px; bottom:33px;}
.button>span{ width:11px; height:11px;;border:1px solid #FFF; border-radius:6px; background-color:#000; float:left; margin:0 5px; cursor:pointer; }
.button>.indexbuback{background-color:#F60;}
.button>span:hover{background-color:#F60;}
.movebutton{ position:absolute; width:40px; height:40px; background-color:#000; opacity:0.3; font:30px Simsun;color:#fff;top:180px; text-decoration:none; line-height:40px; text-align:center; display:none; }
.bigcontainer:hover>.movebutton{display:block;}
.movebutton:hover{ opacity:0.7}
.onemovebu{left:15px;}
.twomovebu{ right:15px;}
</style>
<body>
<div class=" bigcontainer">
<div class="imgcontainer">
<img src="img/5.jpg" />
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/1.jpg"/>
</div>
<div class="button" >
<span class=" indexbuback" index="1"></span>
<span class="" index="2"></span>
<span class="" index="3"></span>
<span class="" index="4"></span>
<span class="" index="5"></span>
</div>
<a href="javascript:;" class="movebutton onemovebu"><</a>
<a href="javascript:;" class="movebutton twomovebu">></a>
</div>
<script >
var bigcontainer=document.querySelector(".bigcontainer");
var imgcontainer=document.querySelector(".imgcontainer");
var onemovebu=document.querySelector(".onemovebu");
var twomovebu=document.querySelector(".twomovebu");
var buttonspan =document.querySelector(".button").getElementsByTagName("span")
var button=document.querySelector(".button");
var j=0;
var anime=false;
var imgstyle= getstyle(imgcontainer);
function addback(index){
eval("j"+index+"")
for(var i=0,len=buttonspan.length;i<len;i++){
if( buttonspan[i].className==" indexbuback")
{
buttonspan[i].className=" ";
break;
}
}
switch (j)
{
case 5:
j=0;
break;
case -1:
j=4;
break;
}
buttonspan[j].className=" indexbuback";
}
function move(offset){
anime=true;
var Int=parseInt (imgstyle.left);
var imgleft= imgcontainer.style
var speed=offset/(300/10)
var allleftwidth=Int+offset;
function movevelocity(){
if(speed>0&&parseInt(imgstyle.left)<allleftwidth||speed<0&&parseInt(imgstyle.left)>allleftwidth)
{
imgleft.left=parseInt(imgstyle.left)+speed+"px";
setTimeout(movevelocity,10)
}
else{
anime=false;
if(parseInt(imgstyle.left)>-600){
imgleft.left=-3000+"px"
}
if(parseInt(imgstyle.left)<-3000){
imgleft.left=-600+"px"
}
}
}
movevelocity();
}
twomovebu.onclick=function(){
if(anime)
{
return;
}
move(-600);
addback("++");
}
onemovebu.onclick=function(){
if(anime)
{
return;
}
move(600);
addback("--");
}
button.onclick=function(event){
if(anime)
{
return;
}
change(getevent(event));
}
function change(e){
var span=target(e)
if(span.className==" indexbuback"){
return;
}
var myindex=span.getAttribute("index");
if( myindex){
var jindex=j+1;
var offset=-600*parseInt(myindex-jindex);
move(offset);
j=myindex;
addback("--");
}
}
function getstyle(element){
return element.currentStyle|| document.defaultView.getComputedStyle(element);
}
function target(e){
return e.target||e.srcElement;
}
bigcontainer.onmouseover=giveup;
bigcontainer.onmouseout=play;
function play(){
ID=setInterval(function(){
twomovebu.onclick();
},3000);
}
function giveup(){
clearInterval(ID);
}
function getevent(event){
return event||window.event;
}
play();
</script>
</body>
</html>
前端交流群:162791594;
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style >
body{ margin:100px 300px;}
.bigcontainer{width:600px; height:400px ;position:relative; overflow:hidden;}
.imgcontainer{width:4200px;position:absolute;left:-600px; }
.imgcontainer>img{ float:left;}
.button{position:absolute; left:200px; bottom:33px;}
.button>span{ width:11px; height:11px;;border:1px solid #FFF; border-radius:6px; background-color:#000; float:left; margin:0 5px; cursor:pointer; }
.button>.indexbuback{background-color:#F60;}
.button>span:hover{background-color:#F60;}
.movebutton{ position:absolute; width:40px; height:40px; background-color:#000; opacity:0.3; font:30px Simsun;color:#fff;top:180px; text-decoration:none; line-height:40px; text-align:center; display:none; }
.bigcontainer:hover>.movebutton{display:block;}
.movebutton:hover{ opacity:0.7}
.onemovebu{left:15px;}
.twomovebu{ right:15px;}
</style>
<body>
<div class=" bigcontainer">
<div class="imgcontainer">
<img src="img/5.jpg" />
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/1.jpg"/>
</div>
<div class="button" >
<span class=" indexbuback" index="1"></span>
<span class="" index="2"></span>
<span class="" index="3"></span>
<span class="" index="4"></span>
<span class="" index="5"></span>
</div>
<a href="javascript:;" class="movebutton onemovebu"><</a>
<a href="javascript:;" class="movebutton twomovebu">></a>
</div>
<script >
var bigcontainer=document.querySelector(".bigcontainer");
var imgcontainer=document.querySelector(".imgcontainer");
var onemovebu=document.querySelector(".onemovebu");
var twomovebu=document.querySelector(".twomovebu");
var buttonspan =document.querySelector(".button").getElementsByTagName("span")
var button=document.querySelector(".button");
var j=0;
var anime=false;
var imgstyle= getstyle(imgcontainer);
function addback(index){
eval("j"+index+"")
for(var i=0,len=buttonspan.length;i<len;i++){
if( buttonspan[i].className==" indexbuback")
{
buttonspan[i].className=" ";
break;
}
}
switch (j)
{
case 5:
j=0;
break;
case -1:
j=4;
break;
}
buttonspan[j].className=" indexbuback";
}
function move(offset){
anime=true;
var Int=parseInt (imgstyle.left);
var imgleft= imgcontainer.style
var speed=offset/(300/10)
var allleftwidth=Int+offset;
function movevelocity(){
if(speed>0&&parseInt(imgstyle.left)<allleftwidth||speed<0&&parseInt(imgstyle.left)>allleftwidth)
{
imgleft.left=parseInt(imgstyle.left)+speed+"px";
setTimeout(movevelocity,10)
}
else{
anime=false;
if(parseInt(imgstyle.left)>-600){
imgleft.left=-3000+"px"
}
if(parseInt(imgstyle.left)<-3000){
imgleft.left=-600+"px"
}
}
}
movevelocity();
}
twomovebu.onclick=function(){
if(anime)
{
return;
}
move(-600);
addback("++");
}
onemovebu.onclick=function(){
if(anime)
{
return;
}
move(600);
addback("--");
}
button.onclick=function(event){
if(anime)
{
return;
}
change(getevent(event));
}
function change(e){
var span=target(e)
if(span.className==" indexbuback"){
return;
}
var myindex=span.getAttribute("index");
if( myindex){
var jindex=j+1;
var offset=-600*parseInt(myindex-jindex);
move(offset);
j=myindex;
addback("--");
}
}
function getstyle(element){
return element.currentStyle|| document.defaultView.getComputedStyle(element);
}
function target(e){
return e.target||e.srcElement;
}
bigcontainer.onmouseover=giveup;
bigcontainer.onmouseout=play;
function play(){
ID=setInterval(function(){
twomovebu.onclick();
},3000);
}
function giveup(){
clearInterval(ID);
}
function getevent(event){
return event||window.event;
}
play();
</script>
</body>
</html>
前端交流群:162791594;
