Js实现轮播图_html轮播图js修改src-CSDN博客

本文链接：https://blog.csdn.net/nininna/article/details/126789429

使用html+css+js实现的轮播图

实现效果：

轮播图

话不多说，贴上代码~

Html部分：(图片src换成自己的路径)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完整的轮播图</title>
</head>
<body>
<div class="box" id="box">
    <div class="inner"><!--相框-->
        <ul>
            <li><img src="风景1.jpg"></li>
            <li><img src="风景2.jpg"></li>
            <li><img src="风景3.jpg"></li>
            <li><img src="风景4.jpg"></li>
            <li><img src="风景5.jpg"></li>
        </ul>
        <ol></ol><!--小按钮-->
    </div>
    <!--左右按钮-->
    <div id="focus"><span id="left">&lt;</span><span id="right">&gt;</span>
    </div>
</div>
</body>

JS部分

<script>
    function my$(id) {
        return document.getElementById(id);
    }
 
    function animate(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = element.offsetLeft;
            var step = 9;
            step = current < target ? step : -step;
            current += step;
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                element.style.left = target + "px";
                clearInterval(element.timeId);
            }
        }, 10);
    }
 
    //获取最外层div
    var box = my$("box");
    //获取相框
    var inner = box.children[0];
    //获取相框宽度
    var imgWidth = inner.offsetWidth;
    //获取ul
    var ulObj = inner.children[0];
    //获取ul中的所有的li
    var list = ulObj.children;
    //获取ol
    var olObj = inner.children[1];
    //左右按钮的div
    var focus = my$("focus");
 
    var pic = 0;//全局变量--鼠标进入的小按钮的索引
    //创建小按钮----根据ul中的li个数
    for (var i = 0; i < list.length; i++) {
        //创建li标签,加入到ol中
        var liObj = document.createElement("li");
        olObj.appendChild(liObj);
        liObj.innerHTML = (i + 1);
        //在每个ol中的li标签上添加一个自定义属性,存储索引值
        liObj.setAttribute("index",i);
        //设置ol中第一个li有背景颜色
        olObj.children[0].className = "current";
        //注册鼠标进入事件
        liObj.onmouseover = function () {
            //取消所有ol-li的类样式
            for (var j = 0; j < olObj.children.length; j++) {
                olObj.children[j].removeAttribute("class");
            }
            //设置当前鼠标进来的li的背景颜色
            this.className = "current";
            //获取鼠标进入的li的当前索引值
            pic = this.getAttribute("index");
            //移动ul
            animate(ulObj, -pic * imgWidth);
        };
    }
 
    //克隆ul中的第一个li,加入到ul中的最后---克隆(为了无缝)
    ulObj.appendChild(list[0].cloneNode(true));
 
    //自动播放--直接看成一直点击右按钮
    var timeId= setInterval(clickHandle,2000);
 
    //鼠标进入,显示左右按钮的div
    box.onmouseover = function () {
        focus.style.display = "block";
        //鼠标进入清除之前的定时器
        clearInterval(timeId);
    };
    //鼠标离开,隐藏左右按钮的div
    box.onmouseout = function () {
        focus.style.display = "none";
        //鼠标离开自动播放
        timeId= setInterval(clickHandle,2000);
    };
 
    //右边按钮
    my$("right").onclick =clickHandle;
 
    function clickHandle() {
        //如果pic=5,此时页面显示第六个图片,而用户会认为这是第一个图,
        //所以,如果用户再次点击按钮,用户应该看到第二个图片
        if (pic ===list.length - 1) {
            //如何从第6个图,跳转到第1个图
            pic = 0;//先设置pic=0
            ulObj.style.left = pic+ "px";//把ul的位置还原成开始的默认位置
        }
        pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
        animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
        //如果pic=5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色
        if (pic ===list.length - 1) {
            //第5个按钮颜色去掉样式
            olObj.children[olObj.children.length - 1].className="";
            //为第1个按钮颜色设置样式
            olObj.children[0].className = "current";
        } else {
            //去掉所有的小按钮的背景颜色
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
 
    }
    //左边按钮
    my$("left").onclick = function () {
        if (pic === 0) {
            pic =list.length - 1;
            ulObj.style.left = -pic * imgWidth + "px";
        }
        pic--;
        animate(ulObj, -pic * imgWidth);
        //设置小按钮的颜色--去掉所有的小按钮的颜色
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        //当前的pic索引对应的按钮设置颜色
        olObj.children[pic].className = "current";
 
    };
</script>

CSS部分：

    <style>
        ul {
            list-style: none;
            position: absolute;
            margin: 0;
            padding: 0;
            width: 1000%;
        }
 
        img {
            width: 400px;
            height: 300px;
        }
 
        .box {
            width: 400px;
            height: 300px;
            margin: 10px auto;
            padding: 5px;
            border: 1px solid gray;
            position: relative;
        }
 
        .inner {
            width: 400px;
            height: 300px;
            background-color: pink;
            overflow: hidden;
            position: relative;
        }
 
        .inner ol {
            list-style: none;
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
 
        .inner li {
            float: left;
        }
 
        .inner ol li{
            width: 16px;
            height: 16px;
            line-height: 16px;
            background-color: white;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
 
        .inner ol li.current {
            background:orange;
            color: white;
        }
 
        #focus {
            display: none;
        }
 
        #focus span {
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin-top: -20px;
            position: absolute;
            left: 5px;
            top: 50%;
            background-color: #000;
            opacity: 0.3;
            cursor: pointer;
            text-align: center;
            font-weight:bold;
            font-size: 30px;
            color: #fff;
            border: 1px solid #fff;
        }
 
        #focus #right {
            right: 5px;
            left: auto;
        }
    </style>