js 多动画轮播效果

图片:轮播.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

时间: 2024-11-05 13:40:56

js 多动画轮播效果的相关文章

原生js重写《锋利的JS》之 轮播效果

<!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的图片轮播效果简单实现

基本效果如下: 实现了三张图片自动轮播+按键点击切换的效果. 基本思想: 图片轮播的效果和老式电影院的胶片放映形式很相似,在老式的电影院放映中,使用长长的胶片记录影片,胶片上是按顺序排列的一系列图片,通过快速通过放映机放映口,使这些图片产生一个连贯的切换效果,形成了动态的影片.所以,这里图片轮播的形式也可以采用这种方式来形成动画效果. 形式如下图: (黑框即我们的最外层的容器,充当放映机的存在:绿框就是胶片,上面搭载着很多的图片:粉框内即我们要轮播的图片) 从上图出发,我们要做到图片轮播,那么只

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Carousel figure</title> 5 <meta charset="utf-8"> 6 <!-- 浏览器标签页显示图标 --> 7 <lin

js 实现横向轮播效果

参考:https://www.cnblogs.com/LIUYANZUO/p/5679753.html html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use

动画轮播效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> @keyframes lun { 0%,20% { transform:translate(0px); } 25%,40% { transform:translate(-600px); } 45%,60% { tra

js实现淘宝首页图片轮播效果

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body

JS实现焦点图轮播效果

大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到欣慰 ! 好吧,其实说白了就是穷,就是没钱,就是不能好好地任性,所以只能先去慕课网找教程学习把它给做出来! OK,首先将HTML结构搭建好先: <div id="container"> <div id="list" style="left:

js的轮播效果

图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 960px; height: 400px; o

原生js点击轮播图效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <title>原生js轮播效果</title&g