溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js實現點擊輪播切換圖片的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點擊輪播圖</title>
</head>
<style>
.container {
position: relative;
width: 600px;
height: 400px;
margin:100px auto 0 auto;
box-shadow: 0 0 5px green;
overflow: hidden;
}
.wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: 1;
}
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
.container .buttons {
position: absolute;
right: 40%;
bottom:20px;
z-index: 2;
}
.container .buttons span {
margin-left: 10px;
display: inline-block;
width: 7px;
height: 7px;
background-color: #D4D4D4;
text-align: center;
color:white;
cursor: pointer;
}
.container .buttons span.on{
background-color: #558949;
}
.container .arrow {
position: absolute;
top: 35%;
color: green;
padding:0px 14px;
border-radius: 50%;
font-size: 50px;
z-index: 2;
display: none;
}
</style>
<body>
<div class="container">
<div class="wrap" >
<img alt="">
<img src="./img/jd_app3.png" alt="">
<img src="./img/jd_app4.png" alt="">
<img src="./img/jd_app5.png" alt="">
<img src="./img/jd_app6.png" alt="">
<img src="./img/jd_app7.png" alt="">
</div>
<div class="buttons">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var wrap = document.querySelector(".wrap");
var index = 0;
var dots = document.getElementsByTagName("span");
function showCurrentDot () {
for(var i = 0, len = dots.length; i < len; i++){
dots[i].className = "";
}
dots[index].className = "on";
}
index++;
if(index > 4){
index = 0;
}
index--;
if(index < 0){
index = 4;
}
showCurrentDot();
for (var i = 0, len = dots.length; i < len; i++){
(function(i){
dots[i].onclick = function () {
var dis = index - i;
if(index == 4 && parseInt(wrap.style.left)!==-3000){
dis = dis - 5;
}
//和使用prev和next相同，在最開始的照片5和最終的照片1在使用時會出現問題，導致符號和位數的出錯，做相應地處理即可
if(index == 0 && parseInt(wrap.style.left)!== -600){
dis = 5 + dis;
}
wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
index = i;
showCurrentDot();
}
})(i);
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
