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 相关文章推荐
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
javascript常用的正则表达式实例
May 15 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 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
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
如何使用Pytorch搭建模型
2020/10/26 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
汽车销售求职自荐信
2013/10/01 职场文书
应聘自荐书
2013/10/08 职场文书
自荐书4要点
2014/01/25 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
2015年教务工作总结
2015/05/23 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python