<!DOCTYPE html>
<html lang="ms">
<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></kepala>
<badan>
<p class="pembungkus">
<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;//Tambah 5 lagi 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>
Saya ingin bertanya, apabila gambar itu mencapai gambar terakhir dan kemudian memaparkan gambar seterusnya, bagaimana ia tidak dapat melihat kesan peralihan di tengah dan menjadikannya serta-merta pergi ke gambar pertama?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda meletakkan klon gambar pertama di hujung
Saya menulis satu menggunakan jquery, anda boleh merujuknya
Paparan kesan:
https://ityanxi.github.io/seg...
Anda boleh mencarinya di laman web ini, sebenarnya ramai yang bertanya tentangnya. Prinsipnya adalah penipuan visual, sama dengan struktur 5,1,2,3,4,5,1 Apabila kita sampai ke gambar kelima, kita perlu kembali ke 1. Mula-mula, kita tatal ke paling kanan 1 mengikut. animasi. Di hujung peralihan Laraskan kedudukan dengan serta-merta supaya 1 di sebelah kiri menggantikan 1 semasa. Secara ringkasnya, kedudukan 1 di sebelah kanan ialah -1920px, dan kedudukan 1 di sebelah kiri ialah 0px . Hanya apabila karusel mencapai -1920px, kedudukan dilaraskan serta-merta kepada 0px, sekali gus mencapai tujuan penipuan visual. Begitu juga dengan 1 hingga 5, cuma tukar arah