第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
}运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录