js图片切换
从最后一张图片切换到第一张图片，，或者从第一张到最后一张有空白咋回事，，，找好久都没找出来。。求大神指教
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding:0; margin:0; text-decoration:none;}
body{padding:20px;}
#container{width:600px; height:400px; border:3px solid black; overflow: hidden; position: relative;
margin:0 auto ;}
#list{width: 4200px; height: 400px; position: absolute; z-index: 1;
}
#list img{float:left;}
#buttons{position: absolute; height: 10px; width: 100px;z-index: 2; bottom: 20px; left:250px; }
#buttons span{cursor: pointer; float:left;border:1px solid #fff;width:10px;height: 10px;border-radius: 50%;
background: #333; margin-right: 5px; }
#buttons .on{background: orangered;}
.arrow{cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2;
top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
</style>
</head>
<body>
<!--父容器-->
<div id="container">
<div id="list" style="left:0;">
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="1"/>
</div>
<div id="buttons">
<span class="on"></span>
<span ></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
<!--<script type="text/javascript" src="js/mySefl.js"></script>-->
<script type="text/javascript">
window.onload=function(){
var container=$("container");
var List=$("list");
var oImg=List.getElementsByTagName('img');
var Btn=$('buttons').getElementsByTagName('span');
var Prev=$("prev");
var Next=$("next");
var iNow=0;
var arr=[];
//把图片放入数组
// List.style.width=oImg.length*oImg[0].offsetWidth+"px";
for(var i=0;i<oImg.length;i++){
arr.push(oImg[i]);
}
function fn(){
for(var k=0;k<Btn.length;k++){
Btn[k].className='';
}
Btn[iNow].className="on";
}
//上一张
Prev.onclick=function(){
if(iNow==0){
iNow=arr.length;
}
moveLeft(List,-iNow*oImg[0].offsetWidth,-(iNow-1)*oImg[0].offsetWidth);
iNow--;
fn();
}
//下一张
Next.onclick=function(){
if(iNow==arr.length-1){
iNow=-1;
}
moveLeft(List,-iNow*oImg[0].offsetWidth,-(iNow+1)*oImg[0].offsetWidth);
iNow++;
fn();
}
}
//滚动缓冲函数
function moveLeft(obj,old,now){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//设置缓冲时间
var ispeed=(now-old)/10;
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
if(now==old){
clearInterval(obj.timer);
}else{
old=ispeed+old;
obj.style.left=old+'px';
}
},30)
}
function $( v ){
if( typeof v === 'function' ){
window.onload = v;
} else if ( typeof v === 'string' ) {
return document.getElementById(v);
} else if ( typeof v === 'object' ) {
return v;
}
}
</script>
</html>
慕仙67333152回答
-
慕瓜9220888
XYIAUKMCMLJBNLVOEAUSSADXXULQLQLAXYERWDLDVYEHRQRDEGWPJSQEMLWPZZLLGYGFBTQQFTCUFUQQZITCYXURIILQSBKBIYFRPNWVFGGKBZVUXKELVXZIATUKRRWLUJVCCOZQINWVCTNNJRQGCCZQZSQZIXEVLGFUWHQXDUUQLQGOJJJHAIBKWNNOEIXFONOBYZZHQTCJMGRQEAPRPNKBWRQWOLCJJJRSKNDULBEDVEDRRYYSYEGJGDTEUCVKJQPPGAPYQAQXYYUCHAZQGXPHVKTVMGGAVAJIHOFFJQITYPQXNXCZIRQXEDDPHDWVLSTTSXMNMMAUOIZIYXURHBIGHQDAQHYIQWYEBVVWFKWBKYOFPYZIFLYVCCYCSRAYZTDOCVLSPMCTECLAJGNUETYXMDUBICNLQJIIWGUNPYADQNUUZOBXGNQBBUYOXWTRSIGRATVSJJDHFUDMMDKEJTCRDAXOOIWLBQROEYOZVOPVWWXWVDGPMFGXKCUNWDAXNCQPQPTDUOJUXQZGQAKYTCRGKKTTMATSRIFMWNBNWFCJGPIGVECNEOIAODWLVGQUBJSYXUKOYOMVULMGXXDSKZSJZAUUJSKAKKDLTSBHOLYFGYRXMSIJZQTBKTWGNUUOCFUDXVIZTLUUUHHOYMKMPRVVOYMLATLSPWWPHGIRVSKUVXZQJTUUUFXFYHEVPZKSEAZZMVAEFXMIHKKDXLUMCSPSVXOAPAKAWQKUJONQWFFGKCETZSLLHYKMAXXSBKUMLTGGJCZGYQWZLRIOWRGYLBYLRMKZEXSVBYTRQBVDPZYJEQYHXXQUBNOKJJJMOZEGVRHEEECRASBLUUJQSNFSMISVWETCEORIPNZEFFCLOTKFKDWZYIVFHJCCJSKRCRSHKXXLIZIHDIYCJSJHZSIMWSVAMUMMVBLKSKFEXQKXXINPRNGLNYPOGERKNHGLDBKWMPSLMBGLRVYRMDCNWZIFPYGVHZFRLBHLGSXKTQMSTNCNKDZZTTQLUAOOUGUTFTJGWCYPETSOEXEUFXWLUHKOHZIHQXOYVCRGRGARFPDENGZQGNNMUKCBLIJJVKWCJRYZZXFKQCDTKUHMLKTDUBBXMBWLBIFGCRJMLCCDXECBKTDEEFKPKTCDBSTAIXGNOIYJEMBNGXKBBNSONGJAHXWLUDVPVVMXEJCHOOZDJRAJCSTNXRJSBTANGGQYSIREOVVMHQPOVSIZZATSFZRISWXWPOLPCKCGJSRIOVMVTSBUBBLFRWEEWDNUVDNCVYOVWGZNJJBSZRLHVOXWJQXXXBENGOPFZEUHZIJGEFJZSCBIYSDNFEDWDGNXALONMMZKKQFUHWXUHQPFIKNAXEOCRTJBYMJTXLRGIZAAATRGVLRYVODSKAGXURBQHGGJAXEQGOQVORLLBVCRNSOEOLDYDYKATTRXETFDQAIUDXGYDWJUIIDCBKHYPZJYHPYFGWXKSYAMBSZJFKNVESPPWVTJBEULCCCUXPYZWWIHLPFXEIOVETFSHYMNKTIAAZMTHVBCIHIPMSDEMVEXEBRCTUAFYZPGWVVUMMSZGAIXWYLIPZZLQPOXRRSUSQPAPMWTUUCSATQXOOQZOXQXDEQTREMMMDNK
随时随地看视频慕课网APP
Html/CSS
JavaScript