今天看了别人写的图片滑动，看起来很酷，读源码时，似乎有些困难，就模仿着写了一个，实现的效果与原网页相同，不过自己的js代码，逻辑简单，有待改进。 ps：前两天写了旋转木马，那个兼容性不好，今天写这个网页的时候，也是按照这个思路，在谷歌浏览器上运行很好，火狐很多功能不能实现，由于wrap——panel使用了绝对定位，就将translate平移改为了left。改动后，各个浏览器运行的效果不错。
具体代码如下
HTML代码
（没写注释）Parallax Slider
css代码
（自己对应着看）：js代码
（小demo）： // 得到对象
var img = getDOM('img_1');
var prev = getDOM("perv_btn");
var next = getDOM("next_btn");
var wrap_panel = getDOM('wrap_panel');
var bg_1 = getDOM("bg_1");
var bg_2 = getDOM("bg_2");
var bg_3 = getDOM("bg_3");
var show_small = getDOM("show_small");
var list = show_small.getElementsByTagName("li");
var wwidth;
// 为元素绑定事件
var addEvent = function(id,event,fn) {
var el = getDOM(id) || document;
if(el.addEventListener){
el.addEventListener(event,fn,false);
}else if(el.attachEvent){
el.attachEvent('on' + event,fn);
}
}
function init() {
// 对按钮进行定位
// 向前按钮的左边距离=<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的左距离+边框
prev.style.left = img.offsetLeft + 10 + 'px';
// 向前按钮的上边距离=<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的上距离+<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>高度的一半-按钮高度的一半
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;
// 对小<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的容器进行定位
wwidth = document.documentElement.clientWidth || document.body.clientWidth;
show_small.style.left = (wwidth - show_small.clientWidth)/2 + 'px';
}
// 小<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的处理
function small_img() {
// 对<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>进行旋转处理
for (var i = 0;i< list.length; i++) {
// 旋转方向
var direction = Math.pow(-1,parseInt(Math.random()*10));
list[i].style = "transform:rotate(" + (Math.random()*20*direction) + "deg)";
}
list[0].style.opacity = 1;
}
function only_one(el,num) {
for (var i = 0; i < el.length; i++) {
el[i].style.opacity = 0.7;
}
// console.log(num);
el[num].style.opacity = 1;
}
// 浏览器缩放时
window.onresize = function() {
init();
}
// 执行<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
init();
small_img();
addEvent(prev,'click',function() {
// 改变wrap-panel的left
var oldPos = parseInt(wrap_panel.style.left);
if(oldPos == 0) {
// 背景平移 <a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>容器平移
bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = -wwidth*(list.length-1) +'px';
// 更改对应小<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>透明度
only_one(list,list.length-1);
} else {
// 背景平移 <a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>容器平移
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';
// 更改对应小<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>透明度
only_one(list,parseInt(-(oldPos/wwidth + 1)));
}
});
addEvent(next,function() {
// 改变wrap-panel的left
var oldPos = parseInt(wrap_panel.style.left);
if(oldPos == -wwidth*(list.length-1)) {
// 背景平移 <a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>容器平移
bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = '0px';
// 更改对应小<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>透明度
only_one(list,0);
} else {
// 背景平移 <a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>容器平移
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';
// 更改对应小<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>透明度
only_one(list,parseInt(-(oldPos/wwidth - 1)));
}
});
}
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
原文链接：https://www.f2er.com/js/48944.html