1.傳統輪播圖
<div id="box"></div><div id="leftbtn"></div><ul> <li><[圖片上傳中。。。
（1）]> <li><[圖片上傳中。。。
（2）]></ul><ol> <li><[圖片上傳中。。。
（3）]> <li><[圖片上傳中。。。
（4）]> <li><[圖片上傳中。。。
（5）]> <li><[圖片上傳中。。。
（6）]></ol>
第一步，得到元素
var a = document.getElementById("box");
var left = document.getElementById("leftbtn");
var circles = document.getElementById("circles");
var b = document.getElementsByTagName("ul");
var c = document.getElementsByTagName("ol");
var bs = document.getElementsByTagName("li");
// 得到個數var length = bs.length;
// 克隆bs.cloneNode(true)
// 添加元素document.appendChild();
// 定義信息量var idx=0;
第二步，設置定時器
var t = setInterval()
// 鼠標移上（onmouseover）鼠標移開（onmouseout）
// 清除定時器clearInterval(t);
第三步，監聽（左右及小圓點）按鈕事件
left.onclick = function(){
//函數截流//
對象.isanimated 標記： 如果為true，說明它正在執行動畫;
對象.xxx undefined, 假的if(b.isanimated) return;
//信號量的變化idx++;
//改變小圓點changeCircles();
//運動機構的移動animate(bs,{"屬性（left）" : -設置（options）.寬（width） * idx}, 設置動畫時間 ；
//根據信號量設置小圓點時建議用【排他模型】
//更換小圓點函數function changeCircle(){
//去掉所有小圓點的cur for (var i = 0; i < circlesLi.length; i++) {circlesLi[i].className = ""; }
//第信號量這個小圓點加cur circlesLi[idx].className = "cur";
}
2.間歇輪播圖思路：
(1)得到元素
(2)復制一份到html
(3)定時器
setInterval(function(){ 設置樣式 變化量 判斷},1000 // 間隔時間)
3.呼吸輪播圖(和傳統輪播圖寫法相似)
/* 思路：1. 透明度 animate(物體, {"opacity": 1}, 1000) 不透明animate(物體, {"opacity": 0}, 1000) 透明
2. 切換（1） 定時器（2） 定時器函數中：-1 其他所有的變成透明（動畫）-2 當前的變成不透明（動畫）
*/// 得到元素后直接設置屬性值//圖片數量var imgLength = lis.length;
//圖片寬度var width = 560;
//滾動速度var animatetime = 600;
//緩沖描述var tween = "Linear";
//間隔時間var interval = 2000; // 定義信息量 var idx = 0;
與傳統輪播圖不同的是：呼吸輪播加opacity（透明度）；
//原來的信號量的圖片淡出 animate(lis[idx],{"opacity" : 0},1000); 透明
//信號量改變 idx = this.index;//新信號量的圖片淡入 animate(lis[idx],{"opacity" : 1},1000); 不透明
1.先建立兩個 div （div1 ， div2） div2包裹在div1中
2.將div2中用 ul 插入圖片，并且使圖片并排排列 "float " 最后去掉 ul 的點 "list-style"（去點在css中寫即可）
<div class="rolling" id="rolling">
<div class="m_unit" id="m_unit">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
這兩個步驟將無縫滾動輪播圖的css內容準備好了，接下來就是js實現無縫滾動
1.先獲取 div2這個盒子里面的 li
var a =div2. getElementsByTagName("li")
2.將獲取到的 li 加一個定時器 使 li 里面的圖片進行滾動
注意：在這之前我們還需要獲取到div2中圖片的總長度width
// oDiv.offsetWidth 代表 oDiv物體的 寬度值(width+padding+border)
console.log( aLi[0].offsetWidth )（在控制臺輸出div2中圖片的總長度）
// maxLeft 最大的left值
var maxLeft = 0;
for (var i = 0; i < aLi.length; i++) {
maxLeft += aLi[i].offsetWidth;
maxLeft += 10; // 加外邊距（每個圖片的間距10）
}
console.log("maxLeft: " + maxLeft)
接下來我們再復制一份div2中的 ul 的圖片 , 是為了輪播完以后沒有東西輪播將復制的 ul 接在后面繼續輪播，反復循環
// 再復制1份
var oUl = oDiv.getElementsByTagName("ul")[0];
oUl.innerHTML += oUl.innerHTML
然后我們給加一個定時器，并保存位置
// 創建定時器
var t = setInterval(move, 50)
// 保存位置
var x = 0;
// 定義1個函數 move
function move() {
// 1. 更新位置
oDiv.style.left = x + "px";
// 2. 修改x的值
x += -10;
if (x < -maxLeft) {
x = 0
}
}
最后別忘了更新完頁面后去掉定時器，可以寫一個鼠標移上去停止和移出輪播的事件
window.onload = function() {
// 得到物體
var oDiv = document.getElementById("m_unit")
oDiv.onmouseout = function() {
// 創建定時器
t = setInterval(move, 50)
}
oDiv.onmouseover = function() {
// 清除定時器
clearInterval(t)
}
最后，附上完整代碼
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.rolling{
width: 800px;
height: 130px;
border: 10px solid #ccc;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.rolling .m_unit{
/*這是運動的單位*/
/*這個寬度足以致命，為了讓所有的li能夠并排*/
/*這個寬度隨便取，大一點*/
width: 4000px;
position: absolute;
top: 0;
left: 0;
}
.rolling ul{
list-style: none;
}
.rolling ul li{
float: left;
margin-right: 10px;
}
</style>
<div class="rolling" id="rolling">
<div class="m_unit" id="m_unit">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<script>
// 實現 無縫滾動！
// 思路： 獲取子元素，然后在定時器中，定時更新子元素的left值
// 【15:15】 對對
// 整個頁面加載完成
window.onload = function() {
// 得到物體
var oDiv = document.getElementById("m_unit")
oDiv.onmouseout = function() {
// 創建定時器
t = setInterval(move, 50)
}
oDiv.onmouseover = function() {
// 清除定時器
clearInterval(t)
}
// 得到所有 li 物體
var aLi = oDiv.getElementsByTagName("li")
// oDiv.offsetWidth 代表 oDiv物體的 寬度值(width+padding+border)
console.log( aLi[0].offsetWidth )
// maxLeft 最大的left值
var maxLeft = 0;
for (var i = 0; i < aLi.length; i++) {
maxLeft += aLi[i].offsetWidth;
maxLeft += 10; // 加外邊距
}
console.log("maxLeft: " + maxLeft)
// 再復制1份
var oUl = oDiv.getElementsByTagName("ul")[0];
oUl.innerHTML += oUl.innerHTML
// 創建定時器
var t = setInterval(move, 50)
// 保存位置
var x = 0;
// 定義1個函數 move
function move() {
// 1. 更新位置
oDiv.style.left = x + "px";
// 2. 修改x的值
x += -10;
if (x < -maxLeft) {
x = 0
}
}
}
</script>
