无缝自适应轮播（带左右箭头）
前端入坑纪 14
今天也是个好日子，阳光正好，更新来了，继续码字中......
文章图片
素颜轮播 OK，first things first！项目链接
HTML 结构
div.swipWrp 是最外面100%宽度的父级，超过该宽度的子元素隐藏overflow：hiddenCSS结构
body {
font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
}html,
body,
ul,
li {
margin: 0;
padding: 0
}.clearfix::after {
content: "";
display: table;
clear: both
}::-webkit-scrollbar {
display: none
}ul,
li {
list-style: none
}.swipWrp {
position: relative;
width: 100%;
overflow: hidden;
}.arwL,
.arwR {
display: block;
position: absolute;
padding: 3%;
background-size: 80% auto;
background-position: center center;
background-repeat: no-repeat;
top: 50%;
transform: translateY(-50%);
z-index: 9
}.arwL {
left: 0;
background-image: url(img/arrowL.png)
}.arwR {
right: 0;
background-image: url(img/arrowR.png)
}.swipWrp>div>img {
float: left;
line-height: 0;
font-size: 0;
width: 15%;
margin: 0 .833%;
}.swipWrp>div {
width: 600%;
}
这里的关键是设置宽度的问题，首先 .swipWrp为100%，然后里面的div为600%，这样div里的图片再是相对于div又是100除以6张的值JS结构
var swpOuter = document.getElementsByClassName("swipWrp")[0];
var swiper = document.getElementById("swiper");
var imgs = swiper.getElementsByTagName("img");
var arwL = document.getElementsByClassName("arwL")[0];
var arwR = document.getElementsByClassName("arwR")[0];
var timer = null;
var num = 0;
var newNode = document.createElement("img");
newNode.src = https://www.it610.com/article/imgs[0].src;
swiper.appendChild(newNode);
function efect() {
if (num == imgs.length) {
swiper.style.transition ="";
swiper.style.transform = "translateX(0)";
setTimeout(function() {
num = 1;
swiper.style.transition = "all 1s linear";
swiper.style.transform = "translateX(" + num * (-16.66) + "%)";
}, 0)} else {
swiper.style.transition = "all 1s linear";
swiper.style.transform = "translateX(" + num * (-16.66) + "%)";
}}function changer() {if (num <= imgs.length) {
num++
efect()
} else {
num = 0;
efect()
}}
arwL.onclick = function() {if (num > 0) {
num--
} else {
num = imgs.length;
}
efect()
}
arwR.onclick = function() {
if (num < imgs.length) {
num++
} else {
num = 0;
}
efect()
}
swpOuter.onmouseover = function() {
clearInterval(timer)
}
swpOuter.onmouseleave = function() {
timer = setInterval(changer, 3800)
}
timer = setInterval(changer, 3800)
【无缝自适应轮播（带左右箭头）】轮播的无缝切换和之前的单条新闻滚动差不多，注解就不上了。有兴趣的，可以看看！
推荐阅读
- 宽容谁
- 尽力
- 讲述，美丽聪明的海欧！
- 夜游宫|夜游宫 心语
- 画画吗（）
- 艾略特的交易法则“遵循自然规律”
- 猎杀IP
- 陇上秋二|陇上秋二 罗敷媚
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 图书集合完毕