❶ 淺談js寫輪播圖的思路與心得
1 、 首先我們需要在開始時將我們鎖需要的封裝函數鏈接進來。
列如 <script type="text/javascript" src="animate-2.0.1.js"></script>
而且我們必須得得到所有需要用到的對象用 getElementById 、getElementsByTagName，然後把需要一個規范的命名。
2 、第二部我們創建一個定時器先讓輪播圖中所有圖片的 li 動起來
右邊點襪吵擊函數跟定時器所運動的函數一個樣，所以我們可以封裝一個函數abc（）；他們是共用的；
3 、 寫出左邊點擊按鈕事件的函數，這樣就如上abc（）；差不多隻是修改一些東西就行了；
4 、講小圓點的樣式改變封裝成一個函數就是下面的chnage（）；
然後還得監聽點擊每個小圓點的事件，所以可以用for + onclick 講每個小圓點點擊事件給寫出來。
難點：
1 、函數截留，當我們點擊函嘩好戚數正在執行時，如果多亂陵次點擊就會出現圖片運動混亂的現象，這是我們需要用if(picDiv.isanimated) {return;}，
2 、cloneNode（）函數picUl.appendChild(picLi[0].cloneNode(true))
❷ Js圖片輪播思路
思路啊 其實就是 恩 好吧 說常見的幾種
1 好幾個並列的模塊，一個顯示其他版的隱藏恩 你可權以使用for循環
2 每個模塊都不隱藏，但是可以顯示的框的大小是定的，只有在框內的才顯示
3 還有一種 恩習慣JS會比較喜歡吧 就是定時切換圖片的鏈接 其實我更喜歡這種
當然 都需要定時器
❸ js原生代碼實現輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最簡單的輪播廣告</title>
<style>
body, div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
background: #000;
text-align: center;
font: 12px/20px Arial;
}
#box {
position: relative;
width: 492px;
height: 172px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
}
#box .list {
position: relative;
width: 490px;
height: 170px;
overflow: hidden;
border: 1px solid #ccc;
}
#box .list li {
position: absolute;
top: 0;
left: 0;
width: 490px;
height: 170px;
opacity: 0;
transition: opacity 0.5s linear
}
#box .list li.current {
opacity: 1;
}
#box .count {
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li {
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.7;
border-radius: 20px;
}
#box .count li.current {
color: #fff;
opacity: 0.7;
font-weight: 700;
background: #f60
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ul>
</div>
<script>
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var i=index=0; //中間量，統一聲明；
var play=null;
console.log(box,uls,imgs,btn);//獲取正確
//圖片切換, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不糾結、簡單 在css裡面
function show(a){ //方法定義的是當傳入一個下標時，按鈕和圖片做出對的反應
for(i=0;i<btn.length;i++ ){
btn[i].className=''; //很容易看懂吧？每個按鈕都先設置成看不見，然後把當前按鈕設置成可見。
btn[a].className='current';
}
for(i=0;i<imgs.length;i++){ //把圖片的效果設置和按鈕相同
imgs[i].style.opacity=0;
imgs[a].style.opacity=1;
}
}
//切換按鈕功能，響應對應圖片
for(i=0;i<btn.length;i++){
btn[i].index=i; //不知道你有沒有發現，循環里的方法去調用循環里的變數體i，會出現調到的不是i的變動值的問題。所以我先在循環外保存住
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play); //這就是最後那句話追加的功能
}
}
//自動輪播方法
function autoPlay(){
play=setInterval(function(){ //這個paly是為了保存定時器的，變數必須在全局聲明 不然其他方法調不到 或者你可以調用auto.play 也許可以但是沒時間試了
index++;
index>=imgs.length&&(index=0);//可能有優先順序問題，所以用了括弧，沒時間測試了。
show(index);
},1000)
}
autoPlay();//馬上調用，我試過用window.onload調用這個方法，但是調用之後影響到了其他方法，使用autoPlay所以只能這樣調用了
//div的滑鼠移入移出事件
box.onmouseover=function(){
clearInterval(play);
};
box.onmouseout=function(){
autoPlay();
};
//按鈕下標也要加上相同的滑鼠事件，不然圖片停止了，定時器沒停，會突然閃到很大的數字上。 貌似我可以直接追加到之前定義事件中。
</script>
</body>
</html>