运用js简单制作图片的左右移动

今天用js制作简单的图片左右移动的功能,并且当点击按钮,图片自己移动,当鼠标放上图片的时候,图片会停下来,当把鼠标移开的时候,图片会再次自己移动.

首先做简单的css的东西,设置盒子,按钮,长宽,图片的大小之类的东西

<divstyle="width:400px;height:300px;border:1px solid red;overflow:hidden;position:relative;"id="div1">

<ulstyle="width:1600px;height:300px;position:absolute;"id="ul1">

<li><imgsrc="01.jpeg"style="width:400px;height:300px;"></li>

<li><imgsrc="02.jpg"style="width:400px;height:300px;"></li>

<li><imgsrc="03.jpg"style="width:400px;height:300px;"></li>

<li><imgsrc="04.jpg"style="width:400px;height:300px;"></li>

</ul></div><!--图片大家自己添加-->

<inputtype="button"value="往前"onclick="ddLeft()">

<inputtype="button"value="往后"onclick="ddright()">

在这里,li的css要设置左浮动:li{ float:left;}

前面的就是简单的设置一下,把图片放进盒子里,现在我们来开始写js代码

function ddLeft(){
clearInterval(this.time);
var div1 = document.getElementById('div1');
var ul1 = document.getElementById('ul1');
var list = document.getElementsByTagName('li');
var listArray = [];
for(var i=0;i<list.length;i++){  //遍历li
var currentNode = list[i].cloneNode(true); //克隆元素放进新的数组
listArray.push(currentNode); //把新的节点加到数组中
}
for(var j=0;j<listArray.length;j++){ //遍历新的数组
ul1.appendChild(listArray[j]); //加入到ul中
}
ul1.style.width = ul1.clientWidth *2 +'px'; //ul的宽度增加
this.time = setInterval(function(){ //这个this指的是调用的那个button
ul1.style.left = ul1.offsetLeft - 10 +'px'; //移动的放向
if (ul1.offsetLeft <= -1600) { //目标地址,移到图片最后一张的时候
ul1.style.left=0; //从0开始
}  
},30)


div1.onmouseover = function(){ //鼠标移动到图片事件
clearInterval(time);
}
div1.onmouseout = function(){  //鼠标移出来事件
time = setInterval(function(){  //这个time指的对象是window
ul1.style.left = ul1.offsetLeft - 10 +'px';
if (ul1.offsetLeft <= -1600) {
ul1.style.left=0;
}
},30)
}
}

function ddright(){
clearInterval(this.time);  
var div2 = document.getElementById('div1');
var ul1 = document.getElementById('ul1');
var list = document.getElementsByTagName('li');
var listArray = [];

var listA = []; 需要两个数组
for(var i=0;i<list.length;i++){
var currentNode = list[i].cloneNode(true);
listArray.push(currentNode);
}

for(var i=0;i<list.length;i++){
var currentNode = list[i].cloneNode(true);
listA.push(currentNode);
}
for(var j=0;j<listArray.length;j++){
ul1.appendChild(listArray[j]);
}

for(var j=0;j<listA.length;j++){
ul1.appendChild(listArray[j]);
}
ul1.style.width = ul1.clientWidth *3 +'px';
this.time = setInterval(function(){
ul1.style.left = ul1.offsetLeft + 10 +'px';
if (ul1.offsetLeft >= 0) {
ul1.style.left = -1600 + 'px';
}
},30)

div2.onmouseover = function(){
clearInterval(time);
}

div2.onmouseout = function(){
time = setInterval(function(){
ul1.style.left = ul1.offsetLeft + 10 +'px';
if (ul1.offsetLeft >= 0) {
ul1.style.left= -1600 +'px';
}
},30)
}
}

做到这里就可以成功运行啦,运用两个定时器来做的,往左和往右的代码差不多,所以我注解的时候就写往左的一个,往右就不写啦,最重要的细节就是两个定时器的使用,当时我在调试的时候,就遇到定时器的问题,总是销毁不了,后来发现原来是自己的定时器设置的对象不正确,希望能帮到大家