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

今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 图片
滑动
javascript滑动效果、qt实现窗口滑动效果、vue实现页面滑动效果、js实现滑动效果、实现页面左右滑动效果,以便于您获取更多的相关知识。

时间: 2016-05-07
Tags: 图片, 滑动

基于javascript实现图片滑动效果_javascript技巧的相关文章

用javascript实现的仿Flash广告图片轮换效果_javascript技巧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js通过更改按钮的显示样式实现按钮的滑动效果_javascript技巧

通过更改按钮的显示样式,来实现按钮动态滑动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

javascript实现的listview效果_javascript技巧

<style type="text/css">    #oContainer {          width: 600px;          height: 500px;          border: 1px solid menu;          margin: 0px;          padding: 0px;          overflow: hidden;    }    a {          color: black;          te

javascript:;与javascript:void(0)使用介绍_javascript技巧

最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅. 注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明. 在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好. 目前有如下几种解决办法: 1)点击链接后不做任何事情  <a href="javascript

无刷新预览所选择的图片示例代码_javascript技巧

代码如下 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equi

基于JS分页控件实现简单美观仿淘宝分页按钮效果_javascript技巧

最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {

JavaScript实现的经典文件树菜单效果_javascript技巧

本文实例讲述了JavaScript实现的经典文件树菜单效果.分享给大家供大家参考.具体如下: 这是一款简单的JavaScript文件树菜单,经典的树形菜单,特别是文件夹的样式比较经典,折叠和展开也很流畅自然,不过本款菜单有一个缺点,就是菜单的数据写在JS的数组里,这样一来多多少少对菜单内容的修改造成一定麻烦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-file-tree-style-menu-codes/ 具体代码如下: <!DO

JavaScript模拟实现键盘打字效果_javascript技巧

$(function () { var input_type = { init:function ($obj) { this.name = $obj.html().split("") this.length = this.name.length; this.i = 0; }, pri:function () { var $this = this //在此处只能使用闭包,因为windown.settimeout使函数的this指向object windown,而非原型链的this对象.而

JavaScript实现简单的日历效果_javascript技巧

只是个简单的日历模板,各位可根据需要自行添加需要的功能.该模板更多的是提供了关于年.月.日.月初.月末.星期的获取函数.各位可根据需要自行获取.欢迎提供更简便的方式方法,互相学习提高!谢谢~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="

Javascript 鼠标移动上去小三角形滑块缓慢跟随效果_javascript技巧

先来一张截图.  鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随. 不管有多少个都可以. javascript code: 复制代码 代码如下: function changeCoord(id, left) { $$(id).style.left = left; } function $$(id) { return document.getElementById(id); } function $$$(id) { return document.getElementsByCla