利用JS做網頁特效_大圖輪播(實例講解)

來源：懂視網責編：小采時間：2020-11-27 22:33:05

利用JS做網頁特效_大圖輪播(實例講解)

利用JS做網頁特效_大圖輪播(實例講解):廢話不多說，直接上代碼： <style> * { margin: 0px; padding: 0px; } .stage { width: 500px; height: 300px; border: 5px solid black; margin: 200px; position: relative; overflow: hidde

推薦度：

點擊下載本文 文檔為doc格式

導讀利用JS做網頁特效_大圖輪播(實例講解):廢話不多說，直接上代碼： <style> * { margin: 0px; padding: 0px; } .stage { width: 500px; height: 300px; border: 5px solid black; margin: 200px; position: relative; overflow: hidde

廢話不多說，直接上代碼：

<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" style="">2</div>
 <div class="items" style="">3</div>
 <div class="items" style="">4</div>
 <div class="items" style="">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做網頁特效_大圖輪播(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

利用JS做網頁特效_大圖輪播(實例講解)

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用 js 大圖輪播

熱門焦點

利用JS做網頁特效_大圖輪播(實例講解)

利用JS做網頁特效_大圖輪播(實例講解)

利用JS做網頁特效_大圖輪播(實例講解)

最新推薦

猜你喜歡

熱門推薦