"all" id='box'>
"screen">
"arr">"left">
"right">>;
//獲取最外面的div
var box =
my$(
"box");
//獲取相框
var screen = box.children[0]
;//獲取相框的寬度
var imgwidth = screen.offsetwidth;
//的寬度
//獲取ul
var ulobj = screen.children[0]
;//獲取ul中的所有的li
var list = ulobj.children;
//拿到乙個偽陣列
//獲取ol
var olobj = screen.children[1]
;//獲取左右焦點
var arr =
my$(
"arr");
var pic =0;
//這樣就變成了全域性變數，下面任意地方都可以是
//迴圈遍歷list
for(
var i =
0; i < list.length; i++
)//第二步
this
.classname =
"current"
;//獲取上面儲存，設定的索引值
//alert(this.getattribute("index"));
//var pic = this.getattribute("index");
pic =
this
.getattribute
("index");
//注意，把這個pic變成全域性變數，後面可以隨便使用
//呼叫動畫函式animate
animate
(ulobj,
-pic * imgwidth)
;//是一樣的}}
//迴圈外面，給第乙個ol裡面li新增類
olobj.children[0]
.classname =
"current"
;//轉殖乙個ul中的第乙個li,加入到ul中的最後====轉殖
ulobj.
(ulobj.children[0]
.clonenode
(true))
;//true表示轉殖成功，再也不用手動加標籤了
var timeid =
setinterval
(clickhandle,
2000);
//滑鼠經過和離開
box.
onmouseover
=function()
; box.
onmouseout
=function()
;//右邊按鈕
my$(
"right"
).onclick = clickhandle;
//我已經把右側按鈕封裝成函式
function
clickhandle()
pic++
;//立刻設定pic加1,那麼此時使用者就會看到第二個了
animate
(ulobj,
-pic * imgwidth)
;//如果pic==5說明,此時顯示第6個圖(內容是第一張),第乙個小按鈕有顏色,
if(pic == list.length -1)
else
//第二步
olobj.children[pic]
.classname =
"current"
;//典型排他思想}}
//左側按鈕開始
my$(
"left").
onclick
=function()
pic--
;animate
(ulobj,
-pic * imgwidth)
;//典型的排它思想---tab
for(
var i =
0; i < olobj.children.length; i++
)//第二步
olobj.children[pic]
.classname =
"current";}
;//函式封裝動畫animate
function
animate
(element, target)
else},
10);//表示是20毫秒
}<
/script>
js無縫輪播 和淡入淡出輪播
完美運動框架 function move obj,json,fn else 因為要做快取運動，因此需要計算速度 速度是乙個不定值 公式 目標值 當前物件的位置 係數 建議是8 考慮的問題 計算機處理小數有問題因此需要將小數乾掉，我們要進行向上取整和向下取整 算速度 var speed json at...
原生 js 實現無縫滾動輪播
上一次我們看了如何實現簡單的輪播圖，以及各種常用的效果實現 這一次，我們看看無縫滾動輪播圖的實現 利用 左邊的margin 來實現 原理 我們建立乙個div，下圖共紅色部分 然後再div中建立乙個，並且裡面放置6個,每個中放置一張，前三張和後三張是重複的，如圖標記1，2，3 我們讓div 裡面超出部...
原生 js 實現無縫滾動輪播
上一次我們看了如何實現簡單的輪播圖，以及各種常用的效果實現 這一次，我們看看無縫滾動輪播圖的實現 利用 左邊的margin 來實現 原理 我們建立乙個div，下圖共紅色部分 然後再div中建立乙個，並且裡面放置6個,每個中放置一張，前三張和後三張是重複的，如圖標記1，2，3 我們讓div 裡面超出部...