思路是向右移动的时候clone最后一个到第一个位置,重新获取li,设置li[0]marginLeft为负,慢慢向右移动,图片也慢慢改变样式...移动完毕后删除clone的节点,重新绑定节点事件
向左移同理
1.报错没有,问题是调用函数结果不对,大佬把我代码复制运行一波就知道了
(1)问题应该是获取li elements没对,这里我试过
var a=3;var a = 5,结果输出等于5...那我每次前进或者后退都有重新获取li....应该没错啊?
小白表示一脸懵,知道卡在那里但是不知道为什么会卡住
大佬复制运行一下点点就知道了
<!DOCTYPE html>
<HTML>
<head>
<script>
height=320;
imgHeight=300;
width=200;
mostLeft=-188;
RL=12;
size={
/*
img 200 300 0 0
img1 170 255 22.500000000000004 15.000000000000002
img2 150 225 37.5 25
img3 120 180 60 40
*/
"imgheight1":imgHeight*0.8,
"imgheight2":imgHeight*0.7,
"imgheight3":imgHeight*0.6,
"imgwidth1":width*0.8,
"imgwidth2":width*0.7,
"imgwidth3":width*0.6,
"imgheight1top":imgHeight*(1-0.8)/2,
"imgheight2top":imgHeight*(1-0.7)/2,
"imgheight3top":imgHeight*(1-0.6)/2,
"img1left":width*(1-0.8)/2,
"img2left":width*(1-0.7)/2,
"img3left":width*(1-0.6)/2
}
change={
"imgWidthChange":(size.imgwidth1-size.imgwidth2)/40,
"imgHeightChange":(size.imgheight1-size.imgheight2)/40,
"imgMTChange":(size.imgheight2top-size.imgheight3top)/40,
"imgMLChange":(size.img2left-size.img3left)/40,
"opacity":1/40
}
function bdEvent(){
var li=document.querySelectorAll("#slider li");
li[0].addEventListener("click", before,true);
li[1].addEventListener("click", before,true);
li[3].addEventListener("click", next,true);
li[4].addEventListener("click", next,true);
}
function basecss(){
var slider=document.getElementById("slider");
var ul=document.querySelector("#slider ul");
var li=document.querySelectorAll("#slider li");
var img=document.querySelectorAll("#slider img");
var a=document.querySelectorAll("#slider a");
img[0].style.backgroundColor="red";
img[1].style.backgroundColor="green";
img[2].style.backgroundColor="black";
img[3].style.backgroundColor="yellow";
img[4].style.backgroundColor="blue";
document.body.style.margin="0px";
document.body.style.padding="0px";
var left=(screen.width-1024)/2;
slider.style.width="1024px";
slider.style.height=height+"px";
slider.style.marginTop="50px";
slider.style.marginLeft=left+"px";
<!-- slider.style.overflow="hidden"; -->
ul.style.width="9999px";
ul.style.margin="0px";
ul.style.padding="0px";
li[0].style.marginLeft="12px";
for(var i=0;i<li.length;i++){
li[i].style.listStyle="none";
li[i].style.width=width+"px";
li[i].style.height=height+"px";
li[i].style.cssFloat="left";
a[i].style.display="block";
a[i].style.margin="0px auto";
a[i].style.width="40px";
a[i].style.height="20px";
img[i].style.cssFloat="left";
if(i==0||i==4){
img[i].style.width=size.imgwidth2+"px";
img[i].style.height=size.imgheight2+"px";
img[i].style.marginTop=size.imgheight2top+"px";
img[i].style.marginLeft=size.img2left+"px";
}
else if(i==1||i==3){
img[i].style.width=size.imgwidth1+"px";
img[i].style.height=size.imgheight1+"px";
img[i].style.marginTop=size.imgheight1top+"px";
img[i].style.marginLeft=size.img1left+"px";
}else if(i==2){
img[i].style.width=width+"px";
img[i].style.height=imgHeight+"px";
}else{
img[i].style.width=size.imgwidth3+"px";
img[i].style.height=size.imgheight3+"px";
img[i].style.marginTop=size.imgheight3top+"px";
img[i].style.marginLeft=size.img3left+"px";
}
}
}
function next(){
var ul=document.querySelector("#slider ul");
var li=document.querySelectorAll("#slider li");
var img=document.querySelectorAll("img");
//copy最后一个放到最前面然后删除最后一个
var first=li[li.length-1].cloneNode(true);
ul.insertBefore(first,li[0]);
//改过后重新 获取li
var li=document.querySelectorAll("#slider li");
var img=document.querySelectorAll("#slider img");
var mostLeft=-188;
li[0].style.marginLeft=mostLeft+"px";
li[1].style.marginLeft="0px";
var pyl=5,imgWidthChange=0,imgHeightChange=0,imgMTChange=0,imgMLChange=0,opacity=1/40;
/*
img 200 300 0 0
img1 160 240 20 30
img2 140 210 30 45
img3 120 180 40 60
*/
function add(){
if(parseInt(li[0].style.marginLeft)<12){
li[0].style.marginLeft=mostLeft+pyl+"px";
pyl+=5;
imgWidthChange+=change.imgWidthChange;
imgHeightChange+=change.imgHeightChange;
imgMTChange+=change.imgMTChange;
imgMLChange+=change.imgMLChange;
opacity+=change.opacity;
for(var i=0;i<6;i++){
switch(i){
case 0:
li[i].style.opacity=opacity;
img[i].style.width=size.imgwidth3+imgWidthChange+"px";
img[i].style.height=size.imgheight3+imgHeightChange+"px";
img[i].style.marginTop=size.imgheight3top+imgMTChange+"px";
img[i].style.marginLeft=size.img3left+imgMLChange+"px";
break
case 1:
img[i].style.width=size.imgwidth2+imgWidthChange+"px";
img[i].style.height=size.imgheight2+imgHeightChange+"px";
img[i].style.marginTop=size.imgheight2top+imgMTChange+"px";
img[i].style.marginLeft=size.img2left+imgMLChange+"px";
break
case 2:
img[i].style.width=size.imgwidth1+imgWidthChange*2+"px";
img[i].style.height=size.imgheight1+imgHeightChange*2+"px";
img[i].style.marginTop=size.imgheight1top+imgMTChange*2+"px";
img[i].style.marginLeft=size.img1left+imgMLChange*2+"px";
break
case 3:
img[i].style.width=width-imgWidthChange*2+"px";
img[i].style.height=imgHeight-imgHeightChange*2+"px";
img[i].style.marginTop=-imgMTChange*2+"px";
img[i].style.marginLeft=-imgMLChange*2+"px";
break
case 4:
img[i].style.width=size.imgwidth1-imgWidthChange+"px";
img[i].style.height=size.imgheight1-imgHeightChange+"px";
img[i].style.marginTop=size.imgheight1top-imgMTChange+"px";
img[i].style.marginLeft=size.img1left-imgMLChange+"px";
break
case 5:
img[i].style.width=size.imgwidth3-imgWidthChange+"px";
img[i].style.height=size.imgheight3-imgHeightChange+"px";
img[i].style.marginTop=size.imgheight2top+imgMTChange+"px";
img[i].style.marginLeft=size.img2left+imgMLChange+"px";
li[i].style.opacity=opacity;
break
}
}
var go=setTimeout(function(){add();},1000/60);
}
else{
ul.removeChild(li[li.length-1]);
clearTimeout(go);
bdEvent();
}
}
var go=setTimeout(function(){add();},1000/60);
}
function before(){
var ul=document.querySelector("#slider ul");
var li=document.querySelectorAll("#slider li");
var img=document.querySelectorAll("img");
//copy最后一个放到最前面然后删除最后一个
var last=li[0].cloneNode(true);
ul.appendChild(last);
console.log("6");
//重新获取li
var li=document.querySelectorAll("#slider li");
var img=document.querySelectorAll("img");
var pyl=0,imgWidthChange=0,imgHeightChange=0,imgMTChange=0,imgMLChange=0,opacity=1/40;
<!-- console.log(change.imgMTChange); -->
/*
3 2 1 0 1 2 3
img 200 300 0 0
img1 160 240 20 30
img2 140 210 30 45
img3 120 180 40 60
*/
function add(){
//重新获取后最左边
if(parseInt(li[0].style.marginLeft)>mostLeft){
li[0].style.marginLeft=RL+pyl+"px";
pyl=pyl-5;
imgWidthChange+=change.imgWidthChange;
imgHeightChange+=change.imgHeightChange;
imgMTChange+=change.imgMTChange;
imgMLChange+=change.imgMLChange;
opacity+=change.opacity;
for(var i=0;i<6;i++){
switch(i){
case 0:
img[i].style.width=size.imgwidth2-imgWidthChange+"px";
img[i].style.height=size.imgheight2-imgHeightChange+"px";
img[i].style.marginTop=size.imgheight2top+imgMTChange+"px";
img[i].style.marginLeft=size.img2left+imgMLChange+"px";
li[i].style.opacity=1-opacity;
break;
case 1:
img[i].style.width=size.imgwidth1-imgWidthChange+"px";
img[i].style.height=size.imgheight1-imgHeightChange+"px";
img[i].style.marginTop=size.imgheight1top-imgMTChange+"px";
img[i].style.marginLeft=size.img1left-imgMLChange+"px";
break;
case 2:
img[i].style.width=width-imgWidthChange*2+"px";
img[i].style.height=imgHeight-imgHeightChange*2+"px";
img[i].style.marginTop=-imgMTChange*2+"px";
img[i].style.marginLeft=-imgMLChange*2+"px";
break;
case 3:
img[i].style.width=size.imgwidth1+imgWidthChange*2+"px";
img[i].style.height=size.imgheight1+imgHeightChange*2+"px";
img[i].style.marginTop=size.imgheight1top+imgMTChange*2+"px";
img[i].style.marginLeft=size.img1left+imgMLChange*2+"px";
break;
case 4:
img[i].style.width=size.imgwidth2+imgWidthChange+"px";
img[i].style.height=size.imgheight2+imgHeightChange+"px";
img[i].style.marginTop=size.imgheight2top+imgMTChange+"px";
img[i].style.marginLeft=size.img2left+imgMLChange+"px";
break;
case 5:
li[i].style.opacity=opacity;
img[i].style.width=size.imgwidth3+imgWidthChange+"px";
img[i].style.height=size.imgheight3+imgHeightChange+"px";
img[i].style.marginTop=size.imgheight3top+imgMTChange+"px";
img[i].style.marginLeft=size.img3left+imgMLChange+"px";
break;
}
}
}
else{
clearInterval(back);
ul.removeChild(li[0]);
bdEvent();
}
}
var back=setInterval(add,1000/60)
}
window.onload = function(){
basecss();
bdEvent();
}
</script>
</head>
<body>
<div id="slider">
<ul>
<li>
<img >
<a>0000</a>
</li>
<li>
<img >
<a>0000</a>
</li>
<li>
<img >
<a>0000</a>
</li>
<li>
<img >
<a>0000</a>
</li>
<li>
<img >
<a>0000</a>
</li>
</ul>
</div>
</body>
</HTML>