<!DOCTYPE html><html lang="en"><head> ? ?<meta charset="UTF-8"> ? ?<title></title> ? ?<link href="reset.css" type="text/css" rel="stylesheet"> ? ?<script src="picture.js" type="text/javascript"></script></head><body><div id="container"> ? ?<div id="list" style="left: -600px;"> ? ? ? ?<img src="images/5.jpg" alt="5"> ? ? ? ?<img src="images/1.jpg" alt="1"> ? ? ? ?<img src="images/2.jpg" alt="2"> ? ? ? ?<img src="images/3.jpg" alt="3"> ? ? ? ?<img src="images/4.jpg" alt="4"> ? ? ? ?<img src="images/5.jpg" alt="5"> ? ?</div> ? ?<div id="buttons"> ? ? ? ?<span index="1" class="on"></span> ? ? ? ?<span index="2"></span> ? ? ? ?<span index="3"></span> ? ? ? ?<span index="4"></span> ? ? ? ?<span index="5"></span> ? ?</div> ? ?<a href="javascript:" id="prev" class="arrow"><</a> ? ?<a href="javascript:" id="next" class="arrow">></a></div></body></html>/** * Created by vsus-pc on 2017/7/1. */window.onload=function(){ ? ?var container=document.getElementById('container'); ? ?var list=document.getElementById('list'); ? ?var buttons=document.getElementById('buttons').getElementsByTagName('span'); ? ?var prev=document.getElementById('prev'); ? ?var next=document.getElementById('next'); ? ?var index=1; ? ?function showButton(){ ? ? ? ?for(var i=0;i<buttons.length;i++){ ? ? ? ? ? ?if(buttons[i].className=='on'){ ? ? ? ? ? ? ? ?buttons[i].className=''; ? ? ? ? ? ? ? ?break; ? ? ? ? ? ?} ? ? ? ?} ? ? ? ?buttons[index-1].className='on'; ? ?} ? ?function animate(offset){ ? ? ? ?var newLeft=parseInt(list.style.left)+offset; ? ? ? ?list.style.left=newLeft+'px'; ? ? ? ?if(newLeft>0){ ? ? ? ? ? ?list.style.left=-2400+'px'; ? ? ? ?} ? ? ? ?if(newLeft<-3000){ ? ? ? ? ? ?list.style.left=-600+'px'; ? ? ? ?} ? ?} ? ?prev.onclick=function(){ ? ? ? ?if(index==1){ ? ? ? ? ? ?index=5; ? ? ? ?} ? ? ? ?else{ ? ? ? ? ? ?index-=1; ? ? ? ?} ? ? ? ?showButton(); ? ? ? ?animate(600); ? ?}; ? ?next.onclick=function(){ ? ? ? ?if(index==5){ ? ? ? ? ? ?index=1; ? ? ? ?} ? ? ? ?else{ ? ? ? ? ? ?index+=1; ? ? ? ?} ? ? ? ?showButton(); ? ? ? ?animate(-600); ? ?}; ? ?for(var i=0;i<buttons.length;i++){ ? ? ? ?buttons[i].onclick=function(){ ? ? ? ? ? ?if(this.className=='on'){ ? ? ? ? ? ? ? ?return; ? ? ? ? ? ?} ? ? ? ? ? ?var myIndex=parseInt(this.getAttribute(index)); ? ? ? ? ? ?var offset=-600*(myIndex-index); ? ? ? ? ? ?animate(offset); ? ? ? ? ? ?index=myIndex; ? ? ? ? ? ?showButton(); ? ? ? ? ? ?debugger; ? ? ? ?} ? ?}};
為什么點擊小圓點沒反應(yīng)還會報錯？
慕的地0102081
2017-07-01 19:01:28
