您的位置：首页 > Web前端 > JavaScript

Javascript运动各个运动bug以及仿Flash的图片轮换实例

2017-03-12 23:42 483 查看

52-js.html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js运动实例-仿FLASH的图片轮换效果</title>
<link rel="stylesheet" type="text/css" href="52-js.css">
<script type="text/javascript" src="52-js.js"></script>
</head>
<body>
<div id="playimages" class="play">
<ul class="big_pic">

<div class="prev"></div>
<div class="next"></div>

<div class="text">加载图片说明……</div>
<div class="length">计算图片数量……</div>

<a class="mark_left" href="javascript:;"></a>
<a class="mark_right" href="javascript:;"></a>
<div class="bg"></div>

<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>

52-js.css文件

body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }

.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }

.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; }

.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; opacity: 0; filter: alpha(opacity=0); cursor: pointer; }
.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001;  opacity: 0; filter: alpha(opacity=0);cursor: pointer; }

.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }
.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6;
e7df
}
.small_pic img { width: 120px; height: 94px; }

52-JS.JS文件

window.onload = function(){

var playimages = document.getElementById('playimages');

var big_ul = getClass(playimages,'big_pic')[0];

var mark_left = getClass(big_ul,'mark_left')[0];
var mark_right = getClass(big_ul,'mark_right')[0];
var prev = getClass(big_ul,'prev')[0];
var next = getClass(big_ul,'next')[0];

var small_pic = getClass(playimages,'small_pic')[0];
var small_ul = small_pic.getElementsByTagName('ul')[0];
var small_lis = small_ul.getElementsByTagName('li');

var big_lis = big_ul.getElementsByTagName('li');

var zIndex = 2;
var now = 0;
var timer = null;

//获得className 数组形式返回
function getClass(ParentNode,className){

var elements = ParentNode.getElementsByTagName('*');
var arr = [];

for(var i=0;i<elements.length;i++){
if(elements[i].className == className){
arr.push(elements[i]);
}
}

return arr;
}

//小图opacity变化
function xt_bianhua(){
for(var j=0;j<small_lis.length;j++){
if(j != now){
startMove(small_lis[j],'opacity',60);
// small_lis[j].style.opacity = 0.6;
}else{
startMove(small_lis[j],'opacity',100);
// small_lis[j].style.opacity = 1;
}
}
}

//小图图片的移动
function xt_move(index){
if(index == 0){
small_ul.style.left = 0;
}else if(index == small_lis.length-1){
small_ul.style.width = parseInt(small_ul.style.width) + (index-1) * small_lis[0].offsetWidth + 'px';
}else{
small_ul.style.width = parseInt(small_ul.style.width) + (index-1) * small_lis[0].offsetWidth + 'px';
small_ul.style.left = -(index-1)  * small_lis[0].offsetWidth + 'px';
}
}

//左右按钮显示或隐藏
prev.onmouseover = mark_left.onmouseover = function(){
startMove(prev,'opacity',100);
};
prev.onmouseout = mark_left.onmouseout = function(){
startMove(prev,'opacity',0);
};

next.onmouseover = mark_right.onmouseover = function(){
startMove(next,'opacity',100);
};
next.onmouseout = mark_right.onmouseout = function(){
startMove(next,'opacity',0);
};

//点击小图切换大图
for(var i=0;i<small_lis.length;i++){
small_lis[i].index = i;
small_lis[i].onclick = function(){
//大图切换
big_lis[this.index].style.zIndex = zIndex++;

if(this.index != now){
big_lis[this.index].style.height = 0;
startMove(big_lis[this.index],'height',320);
}

now = this.index;

//小图opacity变化
xt_bianhua();

//小图图片的移动
xt_move(this.index);
};
}

//点击左右按钮切换图片
prev.onclick = function(){
if(now != 0){
now--;
big_lis[now].style.zIndex = zIndex++;
big_lis[now].style.height = 0;
startMove(big_lis[now],'height',320);
xt_move(now);
}

//小图opacity变化
xt_bianhua();
}

next.onclick = function(){
if(now != big_lis.length-1){
now++;
big_lis[now].style.zIndex = zIndex++;
big_lis[now].style.height = 0;
startMove(big_lis[now],'height',320);
xt_move(now);
}

//小图opacity变化
xt_bianhua();
}

function lunbotu(){
now++;
if(now == big_lis.length){
now = 0;
}
//大图切换
big_lis[now].style.zIndex = zIndex++;
big_lis[now].style.height = 0;
startMove(big_lis[now],'height',320);
//小图opacity变化
xt_bianhua();
//小图ul移动
xt_move(now);
}

//轮播图
timer = setInterval(lunbotu,2000);

playimages.onmouseover = function(){
clearInterval(timer);
};

playimages.onmouseout = function(){
timer = setInterval(lunbotu,2000);
};

};

最近在学习javascript运动(其实是用定时器实现的功能)，以前学习js的时候都没有好好去了解内部的原理，现在当做是给自己重新认识它的一个机会吧。

总结：

一、JS匀速运动bug：

1.在设置timer定时器之前，需要

clearInterval(timer)

，否则再点击按钮执行定时器时，会在同一个div上同时执行多个定时器。

2.在setInterval内部有

if...else..

判断语句，判断是否到达终点，到达则停止执行，没有到达则继续执行定时器。

3.最重要的一点，比如你的速度speed=7,而你每30ms执行7px,但是你的目标target为300px,那么永远不会达到300px,只会到达294。此时解决方法则为

Math.abs(target-此刻的值) < 7

，则进行

clearInterval(timer)

,还需要进行(比如)

div.style.width = '300px';

4.老是出错的地方，浏览器不会提示的bug，要记得在后面加上’px’，比如

div.style.width = div.offsetWidth + speed +

‘px’

同时我们在获取行内样式的时候，比如获得width的值，有可能返回100px，如果没有注意，会将100px去与其它值相加，这样是不对的，我们需要

parseInt(100px)

转化为100;

二、缓冲运动bug：

1、2点与匀速运动的bug一致。

3.speed应该在setInterval内部定义。有一次不小心将spend在定时器外部定义，一直找不到哪里出错了，后来花了好长时间才注意到这个，虽然这个大部分人不会犯错，但还是会存在一些粗心的人，比如我。

4.缓冲速度，如果不使用Math.ceil(speed) 或 Math.floor(speed)，最终获得的speed会是0.XXX，或者是-0.XXX，这样会导致物体不会在运动。

比如：

var speed = (target-div.offsetLeft)/4;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

三、多个物体运动bug：

在看过第一、二点的bug，我想应该对匀速和缓冲运动有所了解了。前两个都是相对于单个物体运动来说。timer都是在全局作用域中定义的(即timer对于物体来说是共享的)。

因此要实现多个物体运动，需要每个物体定义每个timer。

比如：

<div></div>
<div></div>

window.onload = function(){
var divs = document.getElementByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].timer = null;
divs[i].onmouseover = function(){
this.timer = setInterval(fn,30);
};
divs[i].onmouseout = function(){
clearInterval(this.timer);
};
}
};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Javascript运动 各个运动bug以及仿Flash的图片轮换实例

一、JS匀速运动bug：

二、缓冲运动bug：

三、多个物体运动bug：

Javascript运动各个运动bug以及仿Flash的图片轮换实例