溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何使用JS做網頁大圖輪播特效，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
代碼如下：
<style>
* {
margin: 0px;
padding: 0px;
}
.stage {
width: 500px;
height: 300px;
border: 5px solid black;
margin: 200px;
position: relative;
overflow: hidden;
}
.to-left,
.to-right {
position: absolute;
top: 0px;
width: 50px;
height: 300px;
background-color: black;
color: white;
font-size: 30px;
text-align: center;
line-height: 300px;
opacity: 0.3;
}
.to-left {
left: 0px;
}
.to-right {
right: 0px;
}
.to-left:hover,
.to-right:hover {
cursor: pointer;
opacity: 0.5;
}
.banner {
width: 3000px;
height: 300px;
}
.items {
float: left;
width: 500px;
height: 300px;
background-color: blanchedalmond;
font-size: 100px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<!--大圖輪播特效-->
<body>
<div class="stage">
<div class="to-left">
<</div>
<div class="to-right">></div>
<div class="banner">
<div class="items">1</div>
<div class="items" >2</div>
<div class="items" >3</div>
<div class="items" >4</div>
<div class="items" >5</div>
<div class="items">1</div>
</div>
</div>
</body>
</html>
<script>
var to_right = document.getElementsByClassName('to-right')[0];
var to_left = document.getElementsByClassName('to-left')[0];
var banner = document.getElementsByClassName('banner')[0];
var arr = [];
var count = 1;
to_right.onclick = function() {
toRight();
}
function toRight(){
arr.push(window.setInterval("moveLeft()", 30));
}
to_left.onclick = function() {
toLeft();
}
function toLeft(){
arr.push(window.setInterval("moveRight()", 30));
}
function moveLeft() {
if(count < 5) {
if(banner.offsetLeft > count * (-500)) {
banner.style.marginLeft = banner.offsetLeft - 20 + "px";
} else {
for(var x in arr) {
window.clearInterval(arr[x]);
}
count++;
}
// 連接點
}else{
if(banner.offsetLeft > count * (-500)) {
banner.style.marginLeft = banner.offsetLeft - 20 + "px";
} else {
for(var x in arr) {
window.clearInterval(arr[x]);
}
count = 1;
banner.style.marginLeft = 0 + 'px';
}
}
}
function moveRight() {
if(count-1 >0) {
if(banner.offsetLeft < (count-2) * (-500)) {
banner.style.marginLeft = banner.offsetLeft + 20 + "px";
} else {
for(var x in arr) {
window.clearInterval(arr[x]);
}
count--;
}
}
}
window.setInterval("toRight()",1750);
</script>以上是“如何使用JS做網頁大圖輪播特效”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
