基于javascript实现图片滑动效果

前端之家收集整理的这篇文章主要介绍了基于javascript实现图片滑动效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的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="/tag/tupian/" target="_blank" class="keywords">图片</a>的左距离+边框 prev.style.left = img.offsetLeft + 10 + 'px'; // 向前按钮的上边距离=<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>的上距离+<a href="/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="/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="/tag/tupian/" target="_blank" class="keywords">图片</a>的处理 function small_img() { // 对<a href="/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="/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="/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="/tag/tupian/" target="_blank" class="keywords">图片</a>透明度 only_one(list,list.length-1); } else { // 背景平移 <a href="/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="/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="/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="/tag/tupian/" target="_blank" class="keywords">图片</a>透明度 only_one(list,0); } else { // 背景平移 <a href="/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="/tag/tupian/" target="_blank" class="keywords">图片</a>透明度 only_one(list,parseInt(-(oldPos/wwidth - 1))); } }); }

    以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

    猜你在找的JavaScript相关文章