本文主要是介绍html+css+JavaScript实现轮播图(新手教程)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

易模仿芒果TV官网轮播图

目录

轮播图分析：

1、轮播图实现的功能

2、图片叠加原理

html页面布局：

CSS修饰：

JavaScript：

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

2、图片叠加原理

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

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

html页面布局：

 <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修饰：

.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：

 <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。

这篇关于html+css+JavaScript实现轮播图(新手教程)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！