html+css+JavaScript实现轮播图(新手教程)

易模仿芒果TV官网轮播图

目录

轮播图分析：

1、轮播图实现的功能

2、图片叠加原理

html页面布局：

CSS修饰：

JavaScript：

轮播图分析：
1、轮播图实现的功能
自动滚动图片。
触碰圆点按钮，按钮亮起；点击圆点按钮显示对应图片，按钮亮起。
触碰错左右按钮，按钮变色；点击左右按钮，图片左右轮播，并且图片对应的圆点按钮亮起。

2、图片叠加原理

轮播图基本上都是将图片插在<ul>标签里，不加任何css会以默认排列方式排列，如下图。

我们需要将所有图片叠加在一起，然后让它们按一定时间移动。

html页面布局：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<div class="banner" >      <div class="img-wrap">          <ul>              <li class="item" style="display: block">                  <a href="https://www.mgtv.com/b/328169/5364726.html"><img src="img/综艺1.jpg" alt="" class="lunbo"></a>              </li>              <li class="item">                  <a href="https://www.mgtv.com/b/328606/5354871.html"><img src="img/综艺2.jpg" alt="" class="lunbo"></a>              </li>              <li class="item">                  <a href="https://www.mgtv.com/b/328308/5376308.html"><img src="img/综艺3.jpg" alt=""class="lunbo"></a>              </li>              <li class="item">                  <a href="https://www.mgtv.com/b/328329/5345359.html"><img src="img/综艺4.jpg" alt="" class="lunbo"></a>              </li>              <li class="item">                  <a href="https://www.mgtv.com/b/327991/5377004.html"><img src="img/综艺5.jpg" alt="" class="lunbo"></a>              </li>         </ul>     </div>     <div class="lr-tab">         <div class="left btn"></div>         <div class="right btn"></div>     </div>     <div class="tab-btn">     <ul>         <li class="btn"></li>         <li class="btn"></li>         <li class="btn"></li>         <li class="btn"></li>         <li class="btn"></li>     </ul>     </div> </div>

　　

CSS修饰：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

.banner{        position: relative;/*相对定位 给绝对定位位置参考*/     width: 100%;     height: 300px;     float: left; } .banner .item{     display: none;/*隐藏元素*/     position: absolute;/* 绝对定位*/     width: 100%;     height: 300px;     top: 0;     left: 0; } ul{     list-style-type: none;/*清除默认列表样式 ....*/     margin: 0;     padding: 0;/*内外编剧清除*/ } .lunbo{     width: 100%;     height: 300px; } /*左右按钮的属性设置*/ .lr-tab .btn{     position: absolute;     top: 120px;     width: 41px;     height: 69px;     background: url("img/8a.png");    } .lr-tab .left{     left: 0px;     background-position-x: -83px;    } .lr-tab .right{     right: 0px;     background-position-x: -125px; } /*左右按钮触碰事件*/ .lr-tab .left:hover{     background-position-x: 0px; } .lr-tab .right:hover{     background-position-x: -41px; } /*圆形按钮属性设定*/ .tab-btn{     position: absolute;     right: 40px;     bottom: 20px;     width: 120px;     height: 30px;     top: 270px;    } .tab-btn .btn{        float: left;     width: 6px;     height: 6px;     background: #868686;     border: 2px solid #c3c3c3;/*边框*/     margin-left: 10px;     border-radius: 50%;  } /*圆形按钮触碰事件*/ .tab-btn .btn:hover{     background: #e4e4e4;     border-color:#7f7f7f; } .tab-btn .active{     background: #e4e4e4;     border-color:#7f7f7f; }

　　

我在小米官网发现他们的左右按钮非常有趣，他们用的是一张图片实现的左右按钮的样式和点击触碰的颜色变换，按钮图片如下：

这样就非常方便。

JavaScript：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<script type="text/javascript" src="jquery-3.3.1.js"></script>                            <script type="text/javascript">                                var index2 = 0;/*初始化一个变量 指向下彪*/                                //点击点                                $(".tab-btn .btn").click(function () {                                    index2 = $(this).index();//获取点击该元素下彪                                    $(this).addClass("active").siblings().removeClass("active");                                    $(".item").eq(index2).fadeIn().siblings().fadeOut();                                });                                //点击切换效果                                $(".lr-tab .right").click(function () {                                    index2 ++;                                    if (index2 >4){ index2 = 0;}                                    $(".item").eq(index2).fadeIn().siblings().fadeOut();                                    $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");                                  });                                $(".lr-tab .left").click(function () {                                    index2 --;                                    if(index2 < 0){index2 = 4;}                                    $(".item").eq(index2).fadeIn().siblings().fadeOut();                                    $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");                                  });                                var time2 = setInterval(function () {                                    index2 ++;                                    if (index2 >4){ index2 = 0;}                                    $(".item").eq(index2).fadeIn().siblings().fadeOut();                                    $(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");                                  },4000); //定时器 重复                            </script>

　　

 这里引用的是Jquery。