基于javascript实现图片滑动效果
今天看了别人写的图片滑动，看起来很酷，读源码时，似乎有些困难，就模仿着写了一个，实现的效果与原网页相同，不过自己的js代码，逻辑简单，有待改进。
ps：前两天写了旋转木马，那个兼容性不好，今天写这个网页的时候，也是按照这个思路，在谷歌浏览器上运行很好，火狐很多功能不能实现，由于wrap——panel使用了绝对定位，就将translate平移改为了left。改动后，各个浏览器运行的效果不错。
具体代码如下
html代码（没写注释）
<divclass="container"> <h1>ParallaxSlider</h1> <divclass="wrap"> <divclass="bg-img"> <divid="bg_1"class="bgbg-1"style="left:0px;"></div> <divid="bg_2"class="bgbg-2"style="left:0px;"></div> <divid="bg_3"class="bgbg-3"style="left:0px;"></div> </div> <divid="wrap_panel"class="wrap-panel"style="left:0px;"> <divclass="panelpanel-1"> <imgid="img_1"src="images/1.jpg"> </div> <divclass="panelpanel-2"> <imgsrc="images/2.jpg"> </div> <divclass="panelpanel-3"> <imgsrc="images/3.jpg"> </div> <divclass="panelpanel-4"> <imgsrc="images/4.jpg"> </div> <divclass="panelpanel-5"> <imgsrc="images/5.jpg"> </div> <divclass="panelpanel-6"> <imgsrc="images/6.jpg"> </div> </div> <divclass="navigation-button"> <spanid="perv_btn"class="perv-button"></span> <spanid="next_btn"class="next-button"></span> </div> <divid="show_small"class="show-small"> <ul> <li><imgsrc="images/thumbs/1.jpg"></li> <li><imgsrc="images/thumbs/2.jpg"></li> <li><imgsrc="images/thumbs/3.jpg"></li> <li><imgsrc="images/thumbs/4.jpg"></li> <li><imgsrc="images/thumbs/5.jpg"></li> <li><imgsrc="images/thumbs/6.jpg"></li> </ul> </div> </div> </div>
css代码（自己对应着看）：
*{margin:0;padding:0;}
html,body,.container{width:100%;height:100%;font-family:'MicrosoftYahei';}
.container{background-color:#222;overflow-x:hidden;}
.containerh1{font-size:50px;color:#ccc;text-align:center;font-weight:bolder;height:120px;line-height:120px;}
.wrap{position:relative;width:600%;height:400px;border-top:10pxsolid#333;border-bottom:10pxsolid#333;margin-top:20px;}
.bg{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-transition:all1s;-moz-transition:all1s;-ms-transition:all1s;-o-transition:all1s;transition:all1s;}
.bg-1{background:url(images/bg1.png);}
.bg-2{background:url(images/bg2.png);}
.bg-3{background:url(images/bg3.png);}
.wrap-panel{position:absolute;width:100%;height:100%;-webkit-transition:all1s;-moz-transition:all1s;-ms-transition:all1s;-o-transition:all1s;transition:all1s;}
.panel{width:16.66%;height:100%;float:left;}
.panelimg{display:block;margin:0auto;margin-top:35px;border-radius:10px;border:10pxsolidrgba(143,143,143,0.6);}
.navigation-buttonspan:hover{opacity:0.8}
.perv-button,.next-button{position:absolute;width:30px;height:60px;background-color:#344133;border-radius:10px;cursor:pointer;opacity:0.4;}
.perv-button{background:#000url(images/prev.png)centercenterno-repeat;}
.next-button{background:#000url(images/next.png)centercenterno-repeat;}
.show-small{position:absolute;width:680px;bottom:20px;}
.show-smallul{list-style:none;}
.show-smallulli{float:left;margin:010px;border:5pxsolid#fff;opacity:0.7;cursor:pointer;-webkit-transition:all.3s;-moz-transition:all.3s;-ms-transition:all.3s;-o-transition:all.3s;transition:all.3s;}
.show-smallulli:hover{margin-top:-15px;}
js代码（小demo）：
window.onload=function(){
//得到元素
vargetDOM=function(id){
returntypeofid==="string"?document.getElementById(id):id;
}
//得到对象
varimg=getDOM('img_1');
varprev=getDOM("perv_btn");
varnext=getDOM("next_btn");
varwrap_panel=getDOM('wrap_panel');
varbg_1=getDOM("bg_1");
varbg_2=getDOM("bg_2");
varbg_3=getDOM("bg_3");
varshow_small=getDOM("show_small");
varlist=show_small.getElementsByTagName("li");
varwwidth;
//为元素绑定事件
varaddEvent=function(id,event,fn){
varel=getDOM(id)||document;
if(el.addEventListener){
el.addEventListener(event,fn,false);
}elseif(el.attachEvent){
el.attachEvent('on'+event,fn);
}
}
functioninit(){
//对按钮进行定位
//向前按钮的左边距离=图片的左距离+边框
prev.style.left=img.offsetLeft+10+'px';
//向前按钮的上边距离=图片的上距离+图片高度的一半-按钮高度的一半
prev.style.top=img.offsetTop+img.clientHeight/2-prev.clientHeight/2+'px';
next.style.left=img.offsetLeft+img.clientWidth+10-next.clientWidth+'px';
next.style.top=prev.style.top;
//对小图片的容器进行定位
wwidth=document.documentElement.clientWidth||document.body.clientWidth;
show_small.style.left=(wwidth-show_small.clientWidth)/2+'px';
}
//小图片的处理
functionsmall_img(){
//对图片进行旋转处理
for(vari=0;i<list.length;i++){
//旋转方向
vardirection=Math.pow(-1,parseInt(Math.random()*10));
list[i].style="transform:rotate("+(Math.random()*20*direction)+"deg)";
}
list[0].style.opacity=1;
}
functiononly_one(el,num){
for(vari=0;i<el.length;i++){
el[i].style.opacity=0.7;
}
//console.log(num);
el[num].style.opacity=1;
}
//浏览器缩放时
window.onresize=function(){
init();
}
//执行函数
init();
small_img();
addEvent(prev,'click',function(){
//改变wrap-panel的left
varoldPos=parseInt(wrap_panel.style.left);
if(oldPos==0){
//背景平移图片容器平移
bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left=-wwidth*(list.length-1)+'px';
//更改对应小图片透明度
only_one(list,list.length-1);
}else{
//背景平移图片容器平移
wrap_panel.style.left=(oldPos+wwidth)+'px';
bg_1.style.left=(oldPos+wwidth-parseInt(-(oldPos/wwidth+1))*100)+'px';
bg_2.style.left=(oldPos+wwidth-parseInt(-(oldPos/wwidth+1))*300)+'px';
bg_3.style.left=(oldPos+wwidth-parseInt(-(oldPos/wwidth+1))*500)+'px';
//更改对应小图片透明度
only_one(list,parseInt(-(oldPos/wwidth+1)));
}
});
addEvent(next,'click',function(){
//改变wrap-panel的left
varoldPos=parseInt(wrap_panel.style.left);
if(oldPos==-wwidth*(list.length-1)){
//背景平移图片容器平移
bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left='0px';
//更改对应小图片透明度
only_one(list,0);
}else{
//背景平移图片容器平移
wrap_panel.style.left=(oldPos-wwidth)+'px';
bg_1.style.left=(oldPos-wwidth+parseInt(-(oldPos/wwidth+1))*100)+'px';
bg_2.style.left=(oldPos-wwidth+parseInt(-(oldPos/wwidth+1))*300)+'px';
bg_3.style.left=(oldPos-wwidth+parseInt(-(oldPos/wwidth+1))*500)+'px';
//更改对应小图片透明度
only_one(list,parseInt(-(oldPos/wwidth-1)));
}
});
}
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。