js仿小米官网图片轮播特效


Posted in Javascript onSeptember 29, 2016

小米官网给我的感觉是大气、干净。很多特效的加入让人觉得耳目一新,big满满。 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个。

大致的感觉出来了,贴个图先:

js仿小米官网图片轮播特效

通过前端神器chrom的F12观察小米官网的html代码,不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性进行元素的显示、隐藏。

截图如下(红框内的opacity属性):

js仿小米官网图片轮播特效

好的,实现的手段知道了,那么页面布局先搞出来。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Mking_js_</title>
 <script type="text/javascript" src="js/moveopacity_1.js"></script>
 <style type="text/css">
  #warp{ width:800px; height: 400px; margin: 20px auto; 
   position: relative;}
  #imgWarp{ width:600px; height: 400px;
   position: absolute; top:0; left: 100px; display: inline-block;
  }
  
  .btn:hover{cursor: pointer;}
  .btn{line-height: 30px; text-align: center;font-size: 25px; font-weight: bold;
   color: #fff;width:80px; height: 30px;top:185px;background: #5f7c8a;position: absolute;
   border-radius: 3px;
  }
  .btn:nth-of-type(1){
    left: 0; }
  .btn:nth-of-type(2) {
   right: 0; }

  img
  {
   position: absolute;
   width:600px; height: 400px;
   background-size:contain;
   opacity: 0;
   display: none;
   z-index: 0;
  }
  img:nth-of-type(1) {
    opacity: 1;
    display: block;
   z-index:5;
  }
  .links{ width:300px; height: 30px;
   position: absolute; right:100px; bottom: 10px; z-index: 10; }
  em{font-style: normal; display: inline-block; height: 30px; width: 30px;
   margin-right: 15px; border: 1px solid #000000; vertical-align: top;
   line-height: 30px; font-size: 20px; text-align: center;color: #fff;
   font-weight: bold; border-radius: 50%; background-color: #008000;
   border-color: #c0c0c0;
   box-sizing: border-box;
  }
   em.active{
    background-color: #fff;
    color: #000000;
   }
 </style>
</head>
<body>
 <div id="warp">
  <div id="imgWarp" >
   <img id="img1" src="product/1.jpg" TITLE="img1" />
   <img id="img2" src="product/2.jpg" TITLE="img2"/>
   <img id="img3" src="product/3.jpg" TITLE="img3"/>
   <img id="img4" src="product/4.jpg" TITLE="img4"/>
   <img id="img5" src="product/5.jpg" TITLE="img5" />
   </div>
  <span class="btn" id="left">left</span>
  <span class="btn" id="right">right</span>
  <div class="links">
   <em class="active"></em>
   <em></em>
   <em></em>
   <em></em>
   <em></em>
  </div>
 </div>
</body>
</html>

结构已经有了下面就是添加js让它动起来。

页面中的js:

window.onload = function(){
    var oLeft = document.getElementById("left");
    var oRight = document.getElementById("right");

    var oWarp = document.getElementById("imgWarp");
    var aImg = oWarp.getElementsByTagName("img");
    var aEm = document.getElementsByTagName("em"); 
    var i = 5;
    btn = true;
    oLeft.onclick = function(){
     clearInterval(autoTimer);
     if(btn){ 
      btn=false;
      fnAutoLeft();
     }
    };
    function fnAutoLeft(){
     var a = i % 5;
     i-=1;
     var b = i % 5; 
     startOpacMove(aImg[a],0,aImg[b],100);
     setStyle(b);
    }

    oRight.onclick = function(){
      if(btn){ //单位时间内只能触发一次元素的显示隐藏
      clearInterval(autoTimer);
      btn=false;
      fnAutoRight();
      }
    };
    var count =0;
    function fnAutoRight(){
     var a = i % 5;
     i+=1;
     var b = i % 5;
     
     startOpacMove(aImg[a],0,aImg[b],100); 
     setStyle(b);
     if(i==10){
      i=5;

      for(var j = 0;j<aImg.length;j++){
       if(j==0){
        aImg[0].style.cssText ="opacity: 1; z-index: 5; display: block;";
       }
       else{
        aImg[j].style.cssText ="opacity: 0; z-index: 0; display: none;";
       }
      }
     }
    }
 
    var autoTimer = setInterval(fnAutoRight,5000);
    
    function setStyle(a){
     for(var i=0;i<aEm.length;i++){
       aEm[i].className="";
     } 
     aEm[a].className="active";
    }
   }

运动的js:

function startOpacMove(obj1,tag1,obj2,tag2)
 { 
  var iCur1 = 0;
  var iCur2 = 0; 
  var iTimer = null;
  var iSpeed1 = -2;
  var iSpeed2 = 2;
  clearInterval(iTimer); 
  iTimer = setInterval(function(){

   var iBtn = true;

   iCur1 = css(obj1,'opacity')*100;
   iCur2 = css(obj2,'opacity')*100;
   iCur1 = Math.floor(iCur1);
   iCur2 = Math.floor(iCur2); 

   if(iCur1 != tag1 && iCur2 != tag2){
    iBtn = false;
    
    obj1.style.opacity = (iCur1+iSpeed1)/100;
    // console.log("隐藏元素时候的透明度值:"+(iCur1+iSpeed1)/100);
    obj1.style.filter = 'alpha(opacity='+(iCur1+iSpeed1)+')';
    obj1.style.zIndex = 0;
    
    obj2.style.opacity = (iCur2+iSpeed2)/100;
    obj2.style.filter = 'alpha(opacity='+(iCur2+iSpeed2)+')';
    obj2.style.zIndex = 5;
    obj2.style.display ="block";
   }

   if(iBtn){
    clearInterval(iTimer);
    obj1.style.display ="none";
    obj1.style.opacity =0;
    obj2.style.opacity =1; 
    btn = true;
   }
  },10);
}
    
function css(obj,attr){
 if(obj.currentStyle){ //当前浏览器下存在currentStyle属性
  return obj.currentStyle[attr];
 }else{
  return getComputedStyle(obj,false)[attr];
 }
}

看下js代码是如何让图画动起来的

思考一个问题:画面是如何向左向右切换的,完成这一步的必要条件是什么。假设当前显示的第一张图,向右切换时隐藏第一张图显示第二张图,那么需要做的就是让索引为0的图片隐藏,索引为1的图片显示,再次点击向右按钮索引为1的图片隐藏索引为2的图片显示,后面的情况依次类推,需要获取的索引为0,1,2,3,4。最后注意下右侧的边界问题就OK了。

好的,贴代码:

var i = 5; 
function fnAutoRight(){
  var a = i % 5;
  i+=1;
  var b = i % 5;
}

用变量 i 对5取余,得到的值是0-4的数,刚好是我们想要的结果,对应的a、b也刚好是想要隐藏、显示的图片的索引。再调用写好的运动js、下方显示当前图片位置函数,那么向右这一块就OK了。

图片向左移动,向下我们需要隐藏显示的图片索引是什么,假设当前是第一张图片点击向左的时候,隐藏的图片索引为0,显示的图片索引为4,再次点击隐藏的索引为4显示的为3。显而易见,我们需要的索引为0、4、3、2、1。

代码如下:

var i=5;
function fnAutoLeft(){
  var a = i % 5;
  i-=1;
  var b = i % 5; 
}

同样是i=5,然后对5取余,得到的a为当前需要隐藏的图片索引,让i减一之后再对5取余得到的是需要显示的图片索引。这样向左的问题也就解决了。

在最后部分,写个setInterval定时播放的函数,然后设置一个间隔调用的时间,就完成了自动播放的功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
基于jquery实现弹幕效果
Sep 29 #Javascript
js获取Get值的方法
Sep 29 #Javascript
js带闹铃功能的倒计时代码
Sep 29 #Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 #Javascript
运用js教你轻松制作html音乐播放器
Apr 17 #Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 #Javascript
聊一聊JS中的prototype
Sep 29 #Javascript
You might like
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP动态变静态原理
2006/11/25 PHP
php 三维饼图的实现代码
2008/09/28 PHP
php Smarty 字符比较代码
2011/02/27 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
Javascript面向对象编程
2012/03/18 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
打架检讨书100字
2014/01/19 职场文书
继承权公证书
2014/04/09 职场文书
促销活动总结模板
2014/07/01 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
详解Python内置模块Collections
2022/03/22 Python
vue动态绑定style样式
2022/04/20 Vue.js
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电