运用js简单制作图片的左右移动
2016-08-13 10:39
519 查看
今天用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)
}
}
做到这里就可以成功运行啦,运用两个定时器来做的,往左和往右的代码差不多,所以我注解的时候就写往左的一个,往右就不写啦,最重要的细节就是两个定时器的使用,当时我在调试的时候,就遇到定时器的问题,总是销毁不了,后来发现原来是自己的定时器设置的对象不正确,希望能帮到大家
首先做简单的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)
}
}
做到这里就可以成功运行啦,运用两个定时器来做的,往左和往右的代码差不多,所以我注解的时候就写往左的一个,往右就不写啦,最重要的细节就是两个定时器的使用,当时我在调试的时候,就遇到定时器的问题,总是销毁不了,后来发现原来是自己的定时器设置的对象不正确,希望能帮到大家
相关文章推荐
- js实现简单的动画(4个按钮控制图片上下左右移动)
- Iframe的简单应用,js实现图片左右移动
- js中制作移动的文字和图片
- 用JS实现键盘左右键控制图片移动
- js实现鼠标左右移动,图片也跟着移动效果
- 超级简单实现内容的左右移动js+jquery+html
- js实现图片左右移动轮播
- JS制作简单图片轮播--通过调整margin制作
- js 鼠标移动显示图片的简单实例
- js简单制作图片焦点图
- 使用JS制作一个鼠标可拖的DIV(三)——移动带图片DIV
- 图片的左右移动,js动画效果实现代码
- js 鼠标移动显示图片的简单实例
- js实现键盘的上下左右控制图片移动
- js图片库(无缝循环切换,左右移动效果)
- ScrollPic.js—简单易用的图片左右滚动插件
- JS简单的图片左右滚动
- Js实现图片缩放上下左右移动效果
- 简单的JS 通过点击按钮实现DIV左右移动
- 图片的左右移动,js动画效果实现代码