第65天：仿网易轮播图

最新推荐文章于 2024-07-30 22:36:34 发布

weixin_33979745

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/618321

版权

仿网易轮播图

1、HTML部分

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>仿网易轮播图</title>
 6     <link rel="stylesheet" href="css/css.css">
 7     <script src="js/slider.js" type="text/javascript"></script>
 8     <script src="js/animate.js" type="text/javascript"></script>
 9 </head>
10 <body>
11     <div class="w-slider" id="js_slider">
12         <div class="slider" >
13             <div class="slider-main" id="slider_main_block">
14                 <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div>
15                 <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
16                 <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
17                 <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
18                 <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
19                 <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div>
20             </div>
21         </div>
22         <div class="slider-ctrl" id="slider_ctrl">
23             <span class="slider-prev"></span>
24             <span class="slider-next"></span>
25         </div>
26     </div>
27 </body>
28 </html>

2、CSS部分

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

3、js部分

 1 /**
 2  * Created by Administrator on 2017/10/25.
 3  */
 4 window.οnlοad=function(){
 5     //获取元素
 6     function $(id) {
 7         return document.getElementById(id);
 8     }
 9     var js_slider = $("js_slider");//获取最大盒子
10     var slider_main_block = $("slider_main_block");///图片的父亲
11     var imgs = slider_main_block.children;//获得所有的图片组
12     var slider_ctrl=$("slider_ctrl");//获得控制的父盒子
13 
14     //操作元素
15     for(var i=0;i<imgs.length;i++){
16         var span=document.createElement("span");//创建span
17         span.className="slider-con";//添加类名
18         span.innerHTML=imgs.length-i;//实现倒叙插入
19         slider_ctrl.insertBefore(span,slider_ctrl.children[1]);//在父亲倒数二个孩子前插入
20 
21     }
22     var spans=slider_ctrl.children;
23     spans[1].setAttribute("class","slider-con current");//两个类名
24 
25     var scrollWidth=js_slider.clientWidth;//得到大盒子宽度 动画移动的距离
26     for(var i=1;i<imgs.length;i++){//除了当前的，从1开始
27         imgs[i].style.left=scrollWidth+"px";//除了当前，其他的走到scrollWidth位置
28     }
29 
30     //三个按钮动画开始
31     var iNow=0;//控制播放张数
32     for(var k in spans){//遍历三个按钮
33         spans[k].οnclick=function(){
34             if(this.className=="slider-prev"){
35                 //点击左侧按钮时，当前走到右边，下张快速走到左侧，然后再到中间
36                 animate(imgs[iNow],{left:scrollWidth});//当前图片慢慢走到scrollWidth位置
37                 --iNow<0?iNow=imgs.length-1:iNow;//先加加再判断后执行
38                 imgs[iNow].style.left=-scrollWidth+"px";//快速走到左侧
39                 animate(imgs[iNow],{left:0});//下一张走到left:0的位置
40                 setSquare();
41             }else if(this.className=="slider-next"){//右侧按钮开始
42                 //点击右侧按钮时，当前走到左边，下张快速走到右侧，然后再到中间
43                 animate(imgs[iNow],{left:-scrollWidth});//当前图片慢慢走到-scrollWidth位置
44                 ++iNow>imgs.length-1?iNow=0:iNow;//先加加再判断后执行
45                 imgs[iNow].style.left=scrollWidth+"px";//快速走到右侧
46                 animate(imgs[iNow],{left:0});//下一张走到left:0的位置
47                 setSquare();
48 
49             }else{
50                 //小span点开始
51                var that=this.innerHTML-1;
52                 if(that>iNow){//相当于右侧按钮
53                     animate(imgs[iNow],{left:-scrollWidth});//当前的走到左边
54                     imgs[that].style.left=scrollWidth+"px";//点击的走到右边
55                 }else if(that<iNow){//相当于左侧按钮
56                     animate(imgs[iNow],{left:scrollWidth});//当前的走到右边
57                     imgs[that].style.left=-scrollWidth+"px";//点击的走到左边
58 
59                 }
60                 iNow=that;//点击的给当前
61                 animate(imgs[iNow],{left:0});//点击的走到中间
62                 setSquare();//调用函数
63             }
64         }
65 
66         //控制播放按钮的的函数
67         function setSquare(){
68             for(var i=1;i<spans.length-1;i++){//只遍历1-6的span
69                 spans[i].className="slider-con";//清除所有的current
70             }
71             spans[iNow+1].className="slider-con current";//当前的 从1开始
72         }
73 
74     }
75 
76 
}

运行效果：

weixin_33979745

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第65天：仿网易轮播图

仿网易轮播图1、HTML部分 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>仿网易轮播图</title> 6 <link r...
复制链接

扫一扫