第65天:仿网易轮播图

仿网易轮播图

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.onload=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].onclick=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 
}

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏儿童编程

我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

15310
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

18130
来自专栏儿童编程

《动物魔法学校》儿童学编程Scratch之“外观”部分

导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

19240
来自专栏儿童编程

天干地支五行八卦的对应关系

19490
来自专栏儿童编程

什么样的人生才是有意义的人生——没有标准的标准答案

【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

1.8K50
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.2K20
来自专栏儿童编程

声音功能让儿童编程更有创造性

导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

13840
来自专栏儿童编程

一张图理清《梅花易数》梗概

学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

32240
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

29740
来自专栏儿童编程

儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

22370

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励