原生js实现swiper轮播图效果

html:

                <div class="b_lswiper">
                    <div id="box" class="all">
                        <div class="inner">
                            <ul>
                             <!--node 循环图片-->
                                {% for key,item in listBanner %}
                                <li>
                                    <a href={
   
   {item.jumpUrl}}>
                                        <img src={
   
   {item.bannerUrl}} alt="" class="b_swiperimg">
                                        <span class="s_text">{
   
   {item.bannerTitle}}</span></a>
                                </li>
                                {% endfor %}
                            </ul>
                            <!--里面存放小圆点-->
                            <ol></ol>
                        </div>
                        <div class="focusD" id="arr">
                            <span id="left">&lt</span>
                            <span id="right">&gt</span>
                        </div>
                    </div>
                </div>

js:
// 轮播图
var index = 0;
var box = my$("box");//获取最外面的divvarinner=box.children[0];//获取相框varimgWidth=inner.offsetWidth;//获取去相框的宽度varulObj=inner.children[0];//获取ulvarlist=ulObj.children;//获取ul中所有的livarolObj=inner.children[1];//获取olvararr=my$(“arr”); //获取焦点
//创建小按钮-----根据ul中li的个数
for (var i = 0; i < list.length; i++) {
var liObjs = document.createElement(“li”);
olObj.appendChild(liObjs);
liObjs.innerHTML = ‘’;
liObjs.setAttribute(“index”, i); // liObjs.innerHTML = (i + 1); //在ol中每个li中增加自定义属性，添加索引值
//注册鼠标进入事件
liObjs.onmouseover = function() {
for (var j = 0; j < olObj.children.length; j++) { //先移除所有背景颜色
olObj.children[j].removeAttribute(“class”);
}
this.className = “current”; //设置当前鼠标进来的类样式
index = this.getAttribute(“index”); //获取ol中li的索引值
animate(ulObj, -index * imgWidth); //移动动画函数//移动ul
};
}
//设置第一个ol中li的背景颜色
olObj.children[0].className = “current”;
//克隆ol中第一个li放到最后一个
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId = setInterval(clickHandle, 3000);
my$("box").onmouseover=function()arr.style.display="block";clearInterval(timeId);;//点击右边按钮my$(“right”).onclick = clickHandle;

        function clickHandle() {
            if (index == ulObj.children.length - 1) {
                ulObj.style.left = 0 + "px";
                index = 0;
            }
            index++;
            animate(ulObj, -index * imgWidth);
            if (index == list.length - 1) {
                olObj.children[0].className = "current";
                olObj.children[olObj.children.length - 1].className = "";
            } else {
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].className = "";
                }
                olObj.children[index].className = "current";
            }
        };
        //点击左边按钮
        my$("left").onclick = function() {
            if (index == 0) {
                index = list.length - 1;
                ulObj.style.left = -index * imgWidth + "px";
            }
            index--;
            animate(ulObj, -index * imgWidth);
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].className = "";
            }
            olObj.children[index].className = "current";
        };

        my$("box").onmouseout = function() {
            arr.style.display = "none";
            timeId = setInterval(clickHandle, 3000);
        };
        // 设置一个元素，移动到指定位置
        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 {
                    clearInterval(element.timeId);
                    element.style.left = target + "px";
                }
            }, 10);
        }　　
        function my$(id) {　　
            return document.getElementById(id);　　　　
        }

css:
/* 轮播图 /
.all {
/ margin: 100px auto; /
/ padding: 5px; /
border: 1px solid #ccc;
position: relative;
}
.b_lswiper img {
width: 593px;
height: 316px;
}
.inner {
position: relative;
width: 593px;
height: 316px;
background-color: pink;
overflow: hidden;
}
.inner ul {
width: 1000%;
list-style: none;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.inner ul .s_text {
z-index: 22;
position: absolute;
/ top: 285px; /
/ left: 10px; */
margin-left: 20px;
bottom: 20px;
width: 400px;
color: #fff;
text-align: left;
font-size: 16px;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: “PingFangSC Medium”;
}
.focusD {
position: absolute;
left: 0;
top: 45%;
width: 593px;
padding: 0 10px;
height: 30px;
box-sizing: border-box;
display: none;
}
.inner ol {
position: absolute;
right: 30px;
bottom: 10px;
}
.inner ol li {
display: inline-block;
margin: 0 3px;
width: 28px;
height: 4px;
background: rgba(222, 218, 215, 1);
border-radius: 2px;
}
.focusD span {
display: inline-block;
width: 25px;
font-size: 24px;
height: 30px;
color: #ccc;
line-height: 30px;
text-align: center;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
}
#left {
float: left;
}
#right {
float: right;
}
实现效果：网站链接： 效果展示