整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
說一下需要的知識 setinterval函數，明白document. getelementsById是什么意思。
輪播呈現方式多種多樣，鄙人在這里給出一個比較low的方法，若有大神指教，不甚感激！
思路：
1、在body里面設置一個img標簽，src路徑暫且不設置，并給img標簽設置id。
2、寫一個function函數，里面設置src隨著某種變量而改變的條件。
下面擼代碼?。?！
在這里我采用了投機取巧的方式，我的圖片名都是：
讀者可以按照需要改變一下函數的結構
關注，不迷路，每日分享大量前端知識。
代碼運行結果圖
因為平時用vue，寫代碼習慣了，這個輪播圖的代碼是在vue的腳手架里寫的，把它拆解起來，寫在html原理一樣，如果覺得拆解吃力的話，可以參考我的上篇文章vue腳手架的使用，將這個代碼粘貼到helloworld.vue代碼運行就可以了，基本功能實現了，替換成自己的圖片就可以運行了。唯一美中不足的就是輪播圖一開始不是自動播放的，需要鼠標在圖片上劃過一次才能自動播放，如果用原生js代碼寫的話，用windoes.onload和init，建立定時器，然后清除等操作可以實現自動播放，和鼠標放在上面后停止播放功能，遇到的問題就是，vue加載頁面自動開始觸發的定時器寫在mounted中，但是將定時器銷毀，只能寫在鉤子函數befdestroy和destroy中才能銷毀（我感覺是）中間需要鼠標放在圖片上停止定時器實現不了，對vue的生命周期函數理解的還是不夠，如果有更好的實現方式還請評論區留言交流以后還得多多練習。
體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;
padding: 0;}
#box {
width: 100%;
height: 502px;
overflow: hidden;/*溢出的部分:隱藏*/
}
#box .menu {
width: 607%;
position: relative;
margin-left: -40px;/*左外邊距*/
bottom: 0px;/*低邊距離*/
}
#box .menu ul li {
float: left;/*浮動:左,就是要把圖片往左浮動*/
list-style: none;
}
</style>
</head>
<body>
<div id="box"><!--最外的大盒子-->
<div class="menu"><!--這里是寫入我們要播放的圖片-->
<ul><!--無序列表-->
<li><img src="image/01.jpg" width="1546px;" height="500px"></li>
<li><img src="image/02.jpg" width="1546px;" height="500px"></li>
<li><img src="image/03.jpg" width="1546px;" height="500px"></li>
<li><img src="image/04.jpg" width="1546px;" height="500px"></li>
<li><img src="image/05.jpg" width="1546px;" height="500px"></li>
<li><img src="image/06.jpg" width="1546px;" height="500px"></li>
</ul>
</div>
</div>
<!--在這里導入javascript文件也就是js代碼，如果沒有這個就沒有動畫-->
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<!--寫代碼-->
<script>
// function就是函數執行
$(function(){
//一般獲取元素用var,從第一張圖片開始
var _index=0,
// 窗口寬度,就是把所有圖片放在水平線上的總寬度
window_width=1546,
//時間循環
timer=null,
//圖片內容一共六張
images_count=6;
//獲取下一個
function nextPlay(){
if(_index>images_count-1){//_index指的是每一張圖片
_index=0;//從第一張開始
//stop() 停留，animate自定義動畫往左運動，
$("#box .menu").stop().animate({left:-window_width*_index},500);
}else{
$("#box .menu").stop().animate({left:-window_width*_index},500);
}
//每一個圖片加一就是自動按順序出來
_index++;
}
timer=setInterval(nextPlay,2000);
})
</script>
</body>
</html>javascript文件也就是js文件：鏈接：https://pan.baidu.com/s/1_RUihF6SdA4-NJcqHGqm1g
提取碼：mnfg
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
