js 多动画轮播效果

Posted 2020-10-06 golddemon

 

图片：轮播.jpg

如图，所示的轮播，不但要切换大的背景图，还有文字及其它一些图片，也要动画显示。
当然，这个效果的实现，网上有类似的插件. 不过，也可以自己写出来. 下面我们就一起来看看。燥起来吧！！！
第一步：
        大家暂时不要考虑动态这些的，就是把要轮播的页面及内容，全部显示出来.
        ( 注：轮播一般也称幻灯片播放，下面，我们就把每一次图片的切换，称为幻灯片的切换，每一张幻灯片就用一个LI来实现，而每个幻灯片里还可以包含其它信息，文字，图片都可以，将它们用div包起来，然后，用class来指定样式，让它显示到对应的位置 )
       如下：
        html代码：

<ul>
    <li thumb="img/wide1.jpg">
       <div class="li1sub1"><img src="img/rb.png"/></div>
       <div class="li1sub2"><img src="img/inspira.png"/></div>
       <div class="li1sub3">my name is doubleyong</div>
       <div class="li1sub4"><a href="#">purcharse</a> </div>
   </li>
 </ul>



     第二步：将每一张幻灯片的背景显示出来
       这里不需要将每个幻灯片添加样式，通过在li上添加thumb属性来指定背景图片的地址，然后通过JS来添加背景图片
       代码如下（JS）：
     var liarr = document.getElementById("banner").getElementsByTagName("li");
for(var i=0;i<liarr.length;i++){
      var imgSrc= liarr.getAttribute("thumb"); liarr.style.backgroundImage=‘url(‘+imgSrc+‘)‘;
   }
第三步，就可以来做幻灯片的切换

1. 定义两个全局变量
var timerArr= []; // 存储定时器的数据，每一张幻灯片各种动画的定时器对象
  var currentSolid = 0; //当前显示的幻灯片，从0开始数
    2. 显示第几张幻灯片调用的方法

//显示第几张幻灯片，num为显示的幻灯片数字，从0开始计算
    function current(num){
     hide();     //先把所有的幻灯片隐藏
     clearTimer();  //清空之前的所有定时器
     liarr[num].style.display="block";   //将要显示的那张幻灯片显示出来

   // 上面，实现了显示了大的背景图片切换，但除此这外还有其它的内容，并且，还有动效，那如何来完成？
    // 重点分析：动效，其它就是开始是一个样式，最终是另一个样式，然后，在样式的改变过程中，加上过渡效果即可
   //  最终一个样式，已经通过class来进行了定义，下面只需要设置，每一张幻灯片里的子元素的开始样式就好，即如何设置？
   // 通过在标签添加属性的方式来实现

  var childArr = liarr[num].getElementsByTagName("div");
   for(var i =0 ;i<childArr.length;i++){
    childArr.style.top = childArr.getAttribute("data-y")+"px";   //设置元素的开始位置，在元素中的属性获得
    childArr.style.left = childArr.getAttribute("data-x")+"px";  //设置元素的开始位置，在元素的属性中获得
//注：这里很多的值，来源于元素的属性，所以，HTML代码中，将会进行一些添加，加上需要的数据, 详细查看后面HTML修改后
   childArr.style.opacity = 0;
   var startTime =childArr.getAttribute("data-start"); //开始时间，也是在属性中设置

      //注：此setTimeout 实现了传递参数，详情参考：http://bugshouji.com/shareweb/t84-1
      var timer =setTimeout(annimal(childArr),parseInt(startTime));  
     //添加定时器，在指定时添加指定方法，只调一次
     timerArr.push(timer); //将定时器放到数组中
    }
   }

//执行动画效果的方法
function annimal(ele){
 return function(){ //返回一个函数，让setTimeout执行
        var speed = ele.getAttribute("data-speed")/1000; //得到动态时间，在元素属性中获得
       ele.style.transition = "all "+speed+"s linear"; //添加过渡效果
       ele.style.opacity = 1;
       ele.style.top="";  
       ele.style.left="";

 //注，上面这两个清空，不是简单的清空了样式里的值,因为style是行内样式，指定时它的优先级高于class,
 //这时会应用style里的样式，而我们清空样式里设置的值，这里就将应用class里设置的值
 //这就是一个亮点，通过style属性的设置，来达到两种不同样式的应用

}
}

  // 隐藏所有的幻灯片
 function hide(){
    for(var i=0;i<liarr.length;i++){
        liarr.style.display="none";
    }
  }

//清空之前的所有定时器
function clearTimer(){
 for(var i=0;i<timerArr.length;i++){
       clearTimeout(timerArr);
    }
    timerArr.length=0;
}
 
     因，上面的方法，需要在HTML中设置相关的一些属性，所以，HTML做了以下修改，如下：
     <li thumb="img/wide1.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rb.png"/></div>
        <div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/inspira.png"/></div>
        <div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">my name is doubleyong</div>
        <div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">purcharse</a> </div>
    </li>

<span "="" color:#548dd4=""> （有多少张，就添加多少项，里面的内容也可以设置多个,注：按钮相应的要求来指定开始位置; js代码就不能修改,只需要在HTML添加对应的元素即可）.

<li thumb="img/wide1.jpg">

        <div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rb.png"/></div>
        <div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/inspira.png"/></div>
        <div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">my name is doubleyong</div>
        <div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">purcharse</a> </div>
    </li>
    <li thumb="img/wide2.jpg">
        <div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/lightweight.png"/></div>
        <div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/macbook.png"/></div>
        <div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">哇，动效出来了，好开心</div>
        <div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">开心</a> </div>
    </li>
    <li thumb="img/wide3.jpg">
        <div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rm.png"/></div>
        <div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/bootstrap.png"/></div>
        <div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">Bang bang bang</div>
        <div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">嗨起来</a> </div>
    </li>

 

摘选自：http://www.bugshouji.com/zhuopingweb/t85