网易轮播图

最新推荐文章于 2022-04-15 21:04:24 发布

weixin_30855099

最新推荐文章于 2022-04-15 21:04:24 发布

阅读量93

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/yangguoe/p/8133763.html

版权

html代码：

 1 <body>
 2 <div class="w-slider" id="js_slider">
 3     <div class="slider">
 4         <div class="slider-main" id="slider_main_block">
 5             <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""/></a></div>
 6             <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""/></a></div>
 7             <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""/></a></div>
 8             <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""/></a></div>
 9             <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""/></a></div>
10             <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""/></a></div>
11         </div>
12     </div>
13     <div class="slider-ctrl" id="slider_ctrl">
14         <span class="slider-ctrl-prev"></span>
15         <span class="slider-ctrl-next"></span>
16     </div>
17 </div>
18 </body>

js代码：

  1 window.onload = function() {
  2     // 获取元素
  3     function $(id) {return document.getElementById(id);}
  4     var js_slider = $("js_slider");  // 获取最大盒子
  5     var slider_main_block = $("slider_main_block");  // 滚动图片的父亲
  6     var imgs = slider_main_block.children;  // 获得所有的图片组 需要滚动的部分
  7     var slider_ctrl = $("slider_ctrl");  // 获得 控制span 的 父盒子
  8     // 操作元素
  9     // 生成小span
 10     for(var i=0;i<imgs.length; i++) {
 11 
 12         var span = document.createElement("span");// 创建 span
 13         span.className = "slider-ctrl-con"; // 添加类名
 14         span.innerHTML = imgs.length-i;  //  6 - 0     6 - 1   // 实现 倒序 的方式插入
 15         slider_ctrl.insertBefore(span,slider_ctrl.children[1]);  // 再 父亲 倒数第二个盒子的前面插入
 16     }
 17     // 下面的第一个小span  是默认的蓝色
 18     var spans = slider_ctrl.children;   // 得到所有的 span
 19     spans[1].setAttribute("class","slider-ctrl-con current");  // 两个类名
 20 
 21     var scrollWidth = js_slider.clientWidth; // 得到大盒子的宽度 也就是  后面动画走的距离  310
 22     //  刚开始，按道理   第一张图片 留下   其余的人走到 310 的位置上
 23     for(var i = 1; i<imgs.length; i++) { // 从1 开始 因为第一张不需要计算
 24 
 25         imgs[i].style.left =  scrollWidth + "px";  // 其他人 先右移动到 310 的位置
 26     }
 27     // 遍历三个按钮
 28      // spans 是 8个按钮 他们都是 span
 29     var iNow = 0; //  用来 控制播放张数
 30     for(var k in spans){   //   k  是索引号  spans[k]    spans[0]  第一个span
 31         spans[k].onclick = function() {
 32             // alert(this.innerHTML);
 33             if(this.className == "slider-ctrl-prev"){ // 判断当前点击的这个按钮是不是 prev
 34                 // alert("您点击了左侧按钮");
 35                 //  当我们左侧点击时候， 当前的这张图片 先慢慢的走到右边  上一张 一定先快速走到左侧 （-310）的位置，然后慢慢的走到舞台中
 36                 animate(imgs[iNow],{left: scrollWidth});
 37                 --iNow < 0 ?  iNow = imgs.length - 1 : iNow;
 38                 imgs[iNow].style.left = -scrollWidth + "px";
 39                 animate(imgs[iNow],{left: 0});
 40                 setSquare();
 41             }
 42             else if(this.className == "slider-ctrl-next") {  // 右侧按钮开始
 43                 autoplay();
 44             }
 45             else {
 46                 // alert("您点击了下面的span");
 47                 // 我们首先要知道我们点击是第几张图片  --- 获得当前的索引号
 48                 // alert(this.innerHTML);
 49                 var that = this.innerHTML - 1;
 50                 // console.log(typeof that);
 51                 if(that > iNow) {
 52                       // 做法等同于 右侧按钮
 53                     animate(imgs[iNow],{left: -scrollWidth});  // 当前的这张慢慢的走出去 左侧
 54                     imgs[that].style.left = scrollWidth + "px"; // 点击的那个索引号 快速走到右侧  310
 55                 }
 56                 else if(that < iNow) {
 57                     // 做法等同于 左侧按钮
 58                     animate(imgs[iNow],{left: scrollWidth});
 59                     imgs[that].style.left = -scrollWidth + "px";
 60                 }
 61                 iNow = that;  // 给当前的索引号
 62                 animate(imgs[iNow],{left: 0});
 63                 /*比如 已经播放到 第4张    我点击了 第2张   把 2 给  inow
 64                 下一次播放，应该播放第3张*/
 65                // animate(imgs[iNow],{left: 0});
 66                 setSquare();
 67             }
 68         }
 69     }
 70     //  一个可以控制 播放span 的 函数   当前
 71     function setSquare() {
 72        //  清除所有的span current   留下 满足需要的拿一个
 73         for(var i=1;i<spans.length-1;i++){   //  8个span   我们要 1-6  不要 7  索引号
 74             spans[i].className = "slider-ctrl-con";
 75         }
 76         spans[iNow+1].className = "slider-ctrl-con current";  // 记住 + 1
 77     }
 78     // 定时器开始  其实， 定时器就是  右侧按钮
 79     var timer = null;
 80     timer = setInterval(autoplay,2000);  // 开启定时器
 81     function autoplay() {
 82         //  当我们点击时候， 当前的这张图片 先慢慢的走到左边  下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中
 83         // alert("您点击了右侧按钮");
 84         //iNow == 0
 85         animate(imgs[iNow],{left: -scrollWidth});
 86         // 当前的那个图片 慢慢的走到 -scrollWidth 位置
 87         // 变成1   先 ++   ++iNow  先自加  后 运算
 88         ++iNow > imgs.length -1 ?  iNow = 0 : iNow;
 89         imgs[iNow].style.left = scrollWidth + "px";  // 立马执行  快速走到右侧
 90         animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置  慢慢走过来
 91         setSquare();  // 调用square
 92     }
 93     //鼠标经过清除定时器
 94     js_slider.onmouseover = function() {
 95         clearInterval(timer);
 96     }
 97     js_slider.onmouseout = function() {
 98         clearInterval(timer);  // 要执行定时器 先清除定时器
 99         timer = setInterval(autoplay,2000);  // 开启定时器
100     }
101 }

动画代码：

 4 // 多个属性运动框架  添加回调函数
 5 function animate(obj,json,fn) {  // 给谁    json
 6     clearInterval(obj.timer);
 7     obj.timer = setInterval(function() {
 8         var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
 9         for(var attr in json){   // attr  属性     json[attr]  值
10             //开始遍历 json
11             // 计算步长    用 target 位置 减去当前的位置  除以 10
12             // console.log(attr);
13             var current = 0;
14             if(attr == "opacity")
15             {
16                 current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
17                 console.log(current);
18             }
19             else
20             {
21                 current = parseInt(getStyle(obj,attr)); // 数值
22             }
23             // console.log(current);
24             // 目标位置就是  属性值
25             var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
26             step = step > 0 ? Math.ceil(step) : Math.floor(step);
27             //判断透明度
28             if(attr == "opacity")  // 判断用户有没有输入 opacity
29             {
30                 if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
31                 {
32                     // obj.style.opacity
33                     obj.style.opacity = (current + step) /100;
34                 }
35                 else
36                 {  // obj.style.filter = alpha(opacity = 30)
37                     obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
38 
39                 }
40             }
41             else if(attr == "zIndex")
42             {
43                 obj.style.zIndex = json[attr];
44             }
45             else
46             {
47                 obj.style[attr] = current  + step + "px" ;
48             }
49 
50             if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
51             {
52                 flag =  false;
53             }
54         }
55         if(flag)  // 用于判断定时器的条件
56         {
57             clearInterval(obj.timer);
58             //alert("ok了");
59             if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调，就应该执行回调
60             {
61                 fn(); // 函数名 +  （）  调用函数  执行函数
62             }
63         }
64     },10)
65 }
66 function getStyle(obj,attr) {  //  谁的      那个属性
67     if(obj.currentStyle)  // ie 等
68     {
69         return obj.currentStyle[attr];  // 返回传递过来的某个属性
70     }
71     else
72     {
73         return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
74     }
75 }

css代码：

 1 * {margin:0;padding:0; }
 2 img {
 3     vertical-align: top;
 4 }
 5 .w-slider {
 6     width: 310px;
 7     height: 265px;
 8     margin:100px auto;
 9     position: relative;
10     overflow: hidden;
11 }
12 .slider {
13     width: 310px;
14     height: 220px;
15 
16 }
17 .slider-main {
18     width: 620px;
19     height: 220px;
20 }
21 .slider-main-img {
22     position: absolute;
23     top: 0;
24     left: 0;
25     width: 310px;
26     height: 220px;
27 }
28 .slider-main-img img {
29     width: 100%;
30 }
31 .slider-ctrl {
32     text-align: center;
33     padding-top: 5px;
34 }
35 .slider-ctrl-con {
36     width: 24px;
37     height: 20px;
38     display:inline-block;
39     background:url(../images/icon.png) no-repeat -24px -782px;
40     margin: 0 5px;
41     cursor: pointer;
42     text-indent: -20em;
43     overflow: hidden;
44 }
45 .current {
46     background-position: -24px -762px;
47 }
48 .slider-ctrl-prev,
49 .slider-ctrl-next {
50     position: absolute;
51     top: 50%;
52     margin-top: -35px;
53     background:url(../images/icon.png) no-repeat 6px top;
54     width: 30px;
55     height: 35px;
56     opacity: 0.8;
57     cursor: pointer;
58 }
59 .slider-ctrl-prev {
60     left: 0;
61 }
62 .slider-ctrl-next {
63     right: 0;
64     background-position: -6px -44px;
65 }