仿flash滚动播放图片
2015-04-19 13:18
375 查看
仿flash滚动播放图片
代码：
html部分：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="move.js" type="text/javascript"></script> <link href="css.css" type="text/css" rel="stylesheet"> </head> <body> <div id="playImages" class="play"> <ul class="big_pic"> <div class="prev"></div> <div class="next"></div> <a class="mark_left" href="javascript:;"></a> <a class="mark_right" href="javascript:;"></a> <li style="z-index: 1"><img src="image/1.JPG"></li> <li><img src="image/2.JPG"></li> <li><img src="image/3.JPG"></li> <li><img src="image/4.JPG"></li> <li><img src="image/5.JPG"></li> <li><img src="image/6.JPG"></li> </ul> <div class="small_pic"> <ul> <li><img src="image/1.JPG"></li> <li><img src="image/2.JPG"></li> <li><img src="image/3.JPG"></li> <li><img src="image/4.JPG"></li> <li><img src="image/5.JPG"></li> <li><img src="image/6.JPG"></li> </ul> </div> </div> </body> </html>
css部分：
body{ margin: 0px; padding: 0px; } ul{ margin: 0px; padding: 0px; } li{ list-style: none; }
.play{ width: 600px; height: 550px; left: 30px; top: 20px; position: relative; border: 2px solid black; }
.big_pic{ width: 600px; height: 400px; position: relative; background: snow; overflow: hidden; }
.big_pic li{ width: 600px; height: 400px; overflow:hidden; position: absolute; background: black; z-index: 0 }
.big_pic li img{ width: 600px; height: 400px; position: absolute; }
.mark_left{ width: 300px; height: 400px; background: orange; position: absolute; left: 0px; top: 0px; z-index: 3000; filter: alpha(opacity:0); opacity: 0; }
.mark_right{ width: 300px; height: 400px; background: cornflowerblue; position: absolute; left: 300px; top: 0px; z-index: 3000; filter: alpha(opacity:0); opacity: 0; }
.prev{ width: 60px; height: 60px; background: url(image/btn.gif) no-repeat; position: absolute; z-index: 3001; top: 170px; left: 10px; cursor: pointer; filter: alpha(opacity:0); opacity: 0; }
.next{ width: 60px; height: 60px; background: url(image/btn.gif) no-repeat 0 -60px; position: absolute; z-index: 3001; top: 170px; right: 10px; cursor: pointer; filter: alpha(opacity:0); opacity: 0; }
.small_pic{ width: 594px; height: 144px;position: relative;top: 0;left: 0; border: 3px solid paleturquoise;overflow: hidden;}
.small_pic ul{ width: 594px; height: 144px; position: absolute; left: 0px;top: 0px;}
.small_pic li img{ width: 194px; height: 140px; }
.small_pic ul li{ border:2px solid paleturquoise;width: 194px; height: 140px; float: left; cursor: pointer; filter: alpha(opacity:60); opacity: 0.6; }JS部分：
/**
* Created by archibald on 2015/4/17.
*/
window.onload=function(){
var oPlay=document.getElementById('playImages');
var uBig=getClass(oPlay,'big_pic')[0];
var uSmall=getClass(oPlay,'small_pic')[0];
var oPrev=getClass(oPlay,'prev')[0];
var oNext=getClass(oPlay,'next')[0];
var aLeft=getClass(oPlay,'mark_left')[0];
var aRight=getClass(oPlay,'mark_right')[0];
var oUlSmall=uSmall.getElementsByTagName('ul')[0];
var oSli=uSmall.getElementsByTagName('li');
var oBli=uBig.getElementsByTagName('li');
oUlSmall.style.width=oSli[0].offsetWidth*oSli.length+'px';
oPrev.onmouseover=aLeft.onmouseover=function(){
move(oPrev,100,'opacity');
};
oPrev.onmouseout=aLeft.onmouseout=function(){
move(oPrev,0,'opacity');
};
oNext.onmouseover=aRight.onmouseover=function(){
move(oNext,100,'opacity');
};
oNext.onmouseout=aRight.onmouseout=function(){
move(oNext,0,'opacity');
};
var index=0;
var newZIndex=2;
for (var i=0;i<oSli.length;i++){
oSli[i].num=i;
oSli[i].onclick=function(){
if(this.num==index) {
return;
} else{
index=this.num;
tab();
}
};
oSli[i].onmouseover=function(){
move(this,100,'opacity');
};
oSli[i].onmouseout=function(){
if(this.num!=index){
move(this,60,'opacity');
}
};
}
oPrev.onclick=function(){
index--;
if(index==-1){
index=oSli.length-1;
}
tab();
};
oNext.onclick=function(){
index++;
if(index==oBli.length){
index=0;
}
tab();
};
function tab() {
oBli[index].style.height = 0;
oBli[index].style.zIndex = newZIndex++;
move(oBli[index], 400, 'height');
for (var i = 0; i < oSli.length; i++) {
move(oSli[i], 60, 'opacity');
}
move(oSli[index], 100, 'opacity');
if (index == 0) {
move(oUlSmall, 0, 'left');
} else if (index == oSli.length - 1) {
move(oUlSmall, -(index - 2) * oSli[0].offsetWidth, 'left');
} else {
move(oUlSmall, -(index - 1) * oSli[0].offsetWidth, 'left');
}
};
var timer=setInterval(oNext.onclick,3000);;
oPlay.onmouseover=function(){
clearInterval(timer);
};
oPlay.onmouseout=function(){
timer=setInterval(oNext.onclick,3000);
};
};
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
};
function move(obj,iTarget,name){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(name=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,name))*100);
}else{
cur=parseInt(getStyle(obj,name));
}
var speed=(iTarget-cur)/30;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget){
clearInterval(obj.timer);
}else{
if(name=='opacity'){
obj.style.opacity=(cur+speed)/100;
obj.style.filter='alpha(opacity:'+cur+speed+')';
}else{
obj.style[name]=cur+speed+"px";
}
}
},30);
};
function getClass(oParent,name){
var oArray=[];
var oBj=oParent.getElementsByTagName('*');
for(var i=0;i<oBj.length;i++){
if(oBj[i].className==name){
oArray.push(oBj[i]);
}
}
return oArray;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript+html5实现仿flash滚动播放图片的方法
- 用js实现的一个Flash滚动轮换显示图片代码生成器
- CSS3实现图片滚动播放效果
- flash 播放图片改进
- jquery实现图片左右间隔滚动特效(可自动播放)
- 图片滚动播放
- 滚动图片加视频播放功能
- 编程经验：Flash播放图片兼容火狐浏览器
- 图片滚动播放
- flash滚动图片遮住二级下拉菜单解决方法
- [置顶] 图片无缝滚动播放
- MVC3 js+flash图片滚动
- 滚动视图(UIScrollView)无限无缝左右切换图片,自动顺序加逆序循环播放图片
- Android图片滚动，加入自动播放功能，使用自定义属性实现，霸气十足！
- jquery实现图片左右间隔滚动特效(可自动播放)
- 自动轮播，类似字幕或图片自动滚动播放
- 图片滚动播放--liu(待续)
- 使用Flash循环播放图片的Demo
- 平滑滚动的Flash四屏焦点图代码和淘宝网图片浮动广告代码
- 横向图片滚动播放