<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.wrapper{
width: 640px;
height: 368px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.wrapper li{
float: left;
width: 640px;
}
#list{
/* width: 3200px;*/
position: absolute;
}
.wrapper li img{
width: 100%;
}
.toggle{
width: 640px;
height: 368px;
}
.toggle span{
width: 30px;
height: 50px;
background:#FF9629;
position: absolute;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
/* display: none;*/
}
#prev{
top:159px;
}
#next{
top:159px;
right:0;
}
nav{
width: 640px;
height: 20px;
position: absolute;
bottom:10px;
left: 0;
text-align: center;
line-height: 20px;
}
nav span{
width: 10px;
height: 10px;
background: #FFC8A0;
border-radius: 50%;
display:inline-block;
margin: 0 2px;
}
.active{
background: red;
}
</style></head>
<body>
<p class="wrapper">
<ul id="list" style="left:0px">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
</ul>
<p class="toggle">
<span id="prev"><</span>
<span id="next">></span>
</p>
<nav id="nav">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav></p>
<script type="text/javascript">
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var lis = document.querySelectorAll("#list li");/ list.innerHTML = list.innerHTML;//Add 5 more li/
var wrapper = document.getElementById("wrapper");
//动态的获取宽度
var styleN = document.createElement("style");
var text = "#list{width: "+640*lis.length+"px;}";
text += "#list li{width: "+640+"px;}";
styleN.innerHTML = text;
document.head.appendChild(styleN);
//图片轮播逻辑
function fn(ev) {
var nowLeft =parseInt(list.style.left)+ev;
list.style.left = nowLeft+"px";
list.style.transition ="1s";
/* console.log(list.style.left);*/
if(nowLeft < -(640*lis.length-640)){
list.style.left = 0+"px";
}else if(nowLeft > 0){
list.style.left = -(640*lis.length-640)+"px";
};
}
//自动轮播效果
var time;
play();
function play() {
time=setInterval(function () {
next.onclick();
},2000)
}
//控制左右切换
prev.onclick = function () {
fn(640);
};
next.onclick = function () {
fn(-640);
};
</script>
</body>
</html>
I would like to ask, when the picture reaches the last picture and then displays the next picture, how can it not see the transition effect in the middle and make it instantly go to the first picture?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You put the first picture clone at the end
I wrote one using jquery, you can refer to it
Effect display:
https://ityanxi.github.io/seg...
You can search it on the site. In fact, many people have asked about it. The principle is visual deception, similar to the structure of 5,1,2,3,4,5,1. When we get to the fifth picture, we have to return to 1. First, we scroll to the rightmost 1 according to the animation. At the transitionend Instantly adjust the position so that the 1 on the left replaces the current 1. To put it simply, the position of the 1 on the right is -1920px, and the position of the 1 on the left is 0px. Just when the carousel reaches -1920px, the position is instantly adjusted to 0px, thus achieving the purpose of visual deception. The same goes for 1 to 5, just change the direction