基于javascript实现图片滑动效果_javascript技巧

今天看了别人写的图片滑动，看起来很酷，读源码时，似乎有些困难，就模仿着写了一个，实现的效果与原网页相同，不过自己的js代码，逻辑简单，有待改进。
ps：前两天写了旋转木马，那个兼容性不好，今天写这个网页的时候，也是按照这个思路，在谷歌浏览器上运行很好，火狐很多功能不能实现，由于wrap——panel使用了绝对定位，就将translate平移改为了left。改动后，各个浏览器运行的效果不错。

具体代码如下

html代码（没写注释）

 
    
Parallax Slider
 
    
 
      
 
         
         
         
      
 
      
 
        
 
          
 
        
 
          
 
        
 
          
 
        
 
          
 
        
 
          
 
        
 
          
 
      
 
      
 
         
         
      
 
      
 
        

 
          
 
          
 
          
 
          
 
          
 
        
 
    
 
  
 

css代码（自己对应着看）：

* { margin: 0; padding: 0; } 
  html, body, .container { width: 100%; height: 100%; font-family: 'Microsoft Yahei'; } 
  .container { background-color: #222; overflow-x: hidden; } 
  .container h1 { 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: 10px solid #333; border-bottom: 10px solid #333; margin-top: 20px; } 
  .bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s; } 
  .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: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } 
  .panel { width: 16.66%; height: 100%; float: left; } 
  .panel img { display: block; margin: 0 auto; margin-top: 35px; border-radius: 10px; border: 10px solid rgba(143, 143, 143, 0.6); } 
  .navigation-button span: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: #000 url(images/prev.png) center center no-repeat; } 
  .next-button { background: #000 url(images/next.png) center center no-repeat; } 
  .show-small { position: absolute; width: 680px; bottom: 20px; } 
  .show-small ul { list-style: none; } 
  .show-small ul li { float: left; margin: 0 10px; border: 5px solid #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-small ul li:hover { margin-top: -15px; } 

js代码（小demo）：

window.onload = function() { 
      // 得到元素 
      var getDOM = function (id){ 
        return typeof id==="string"?document.getElementById(id):id; 
      } 
 
      // 得到对象 
      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() { 
         
        // 对按钮进行定位 
        // 向前按钮的左边距离=图片的左距离+边框 
        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'; 
      } 
 
      // 小图片的处理 
      function small_img() { 
        // 对图片进行旋转处理 
        for (var i = 0;i

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