基于javascript实现图片滑动效果


Posted in Javascript onMay 07, 2016

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

具体代码如下

html代码(没写注释)

<div class="container"> 
    <h1>Parallax Slider</h1> 
    <div class="wrap"> 
      <div class="bg-img"> 
        <div id="bg_1" class="bg bg-1" style="left: 0px;"></div> 
        <div id="bg_2" class="bg bg-2" style="left: 0px;"></div> 
        <div id="bg_3" class="bg bg-3" style="left: 0px;"></div> 
      </div> 
      <div id="wrap_panel" class="wrap-panel" style="left: 0px;"> 
        <div class="panel panel-1"> 
          <img id="img_1" src="images/1.jpg"> 
        </div> 
        <div class="panel panel-2"> 
          <img src="images/2.jpg"> 
        </div> 
        <div class="panel panel-3"> 
          <img src="images/3.jpg"> 
        </div> 
        <div class="panel panel-4"> 
          <img src="images/4.jpg"> 
        </div> 
        <div class="panel panel-5"> 
          <img src="images/5.jpg"> 
        </div> 
        <div class="panel panel-6"> 
          <img src="images/6.jpg"> 
        </div> 
      </div> 
      <div class="navigation-button"> 
        <span id="perv_btn" class="perv-button"></span> 
        <span id="next_btn" class="next-button"></span> 
      </div> 
      <div id="show_small" class="show-small"> 
        <ul> 
          <li><img src="images/thumbs/1.jpg"></li> 
          <li><img src="images/thumbs/2.jpg"></li> 
          <li><img src="images/thumbs/3.jpg"></li> 
          <li><img src="images/thumbs/4.jpg"></li> 
          <li><img src="images/thumbs/5.jpg"></li> 
          <li><img src="images/thumbs/6.jpg"></li> 
        </ul> 
      </div> 
    </div> 
  </div>

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< 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(); 
      } 
     
      // 执行函数 
      init(); 
      small_img(); 
      addEvent(prev,'click',function() { 
        // 改变wrap-panel的left 
        var oldPos = 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 
        var oldPos = 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程序设计有所帮助。

Javascript 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
基于jquery实现图片放大功能
May 07 #Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 #Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 #Javascript
js实现上传图片及时预览
May 07 #Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 #Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 #Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 #Javascript
You might like
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
Python格式化css文件的方法
2015/03/10 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python dlib人脸识别代码实例
2019/04/04 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
我们的节日端午节活动方案
2014/03/02 职场文书
《分一分》教学反思
2014/04/13 职场文书
毕业生应聘求职信
2014/07/10 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
python实现A*寻路算法
2021/06/13 Python
总结Python使用过程中的bug
2021/06/18 Python