使用HTML+CSS+JS实现轮播图(适用于新手)

HTML\CSS\JS实现轮播图

CSS部分

 /* 左浮动 */
        .fl {
            float: left;
        }
        /* 居中 */
        .ma {
            margin: auto;
        }
        .banner {
            width: 520px;/* 宽度得跟图片的宽度一般宽 */
            height: 280px;
            position: relative;
            margin-top: 10px;
            overflow: hidden;
        }

        .banner ul {
            list-style: none;
            width: 1000%;
            position: absolute;
            left: 0;
        }

        .banner ul li {
            float: left;
        }

        /* 圆点 */
        .banner .yuandian .yuandian1 {
            width: 15px;
            height: 15px;
            font-size: 10px;
            border-radius: 15px;
            line-height: 15px;
            background-color: red;
            box-sizing: border-box;
            text-align: center;
            color: black;
            z-index: 10;
            margin-left: 15px;
        }

        .banner .yuandian .yuandian2 {
            width: 15px;
            height: 15px;
            font-size: 10px;
            border-radius: 15px;
            line-height: 15px;
            background-color: yellow;
            box-sizing: border-box;
            text-align: center;
            color: black;
            z-index: 10;
            margin-left: 15px;
        }

        .banner .yuandian {
            position: absolute;
            top: 250px;
            left: 195px;
            z-index: 1;
        }

HTML部分

<div class="banner ma" id="pics">
        <div id="xyd" class="yuandian">
            <div class=" yuandian1 fl ">1</div>
            <div class=" yuandian2 fl ">2</div>
            <div class=" yuandian2 fl ">3</div>
            <div class=" yuandian2 fl ">4</div>
            <div class=" yuandian2 fl ">5</div>

        </div>
        <ul>
            <li><a href=""><img class="img01" src="images/1.jpg"></a></li>
            <li><a href=""><img class="img01" src="images/2.jpg"></a></li>
            <li><a href=""><img class="img01" src="images/3.jpg"></a></li>
            <li><a href=""><img class="img01" src="images/4.jpg"></a></li>
            <li><a href=""><img class="img01" src="images/5.jpg"></a></li>

        </ul>
    </div>

JS部分

• 如果跟是在HTML页面里（则需要在页面的最后）

<script>
        // 轮播图
            var pics = document.getElementById("pics");//获取父级元素
            var yuandians = pics.getElementsByClassName("fl");//0 ，1 ，2 ，3获取所有的小圆点
            var a = pics.getElementsByTagName("a");
            for (var i = 0; i < yuandians.length; i++) {
                yuandians[i].index = i
                yuandians[i].onmouseover = function () {
                    for (var j = 0; j < yuandians.length; j++) {
                        yuandians[j].style.backgroundColor = "yellow"
                        a[j].style.display = "none"
                    }
                    this.style.backgroundColor = "red"
                    a[this.index].style.display = "block"
                }
            }
        
    </script>

• 如果是引用的js文件的话（link引入）（写在文章的最前面）

window.onload=function(){
	封装的函数名称
}
		封装函数{
		
		var pics = document.getElementById("pics");//获取父级元素
            var yuandians = pics.getElementsByClassName("fl");//0 ，1 ，2 ，3获取所有的小圆点
            var a = pics.getElementsByTagName("a");
            for (var i = 0; i < yuandians.length; i++) {
                yuandians[i].index = i
                yuandians[i].onmouseover = function () {
                    for (var j = 0; j < yuandians.length; j++) {
                        yuandians[j].style.backgroundColor = "yellow"
                        a[j].style.display = "none"
                    }
                    this.style.backgroundColor = "red"
                    a[this.index].style.display = "block"
                }
            }
        }