簡(jiǎn)單的js輪播圖代碼

···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
#play_box{
position: relative;
width: 670px;
height: 240px;
border: 1px solid #ccc;
}
#play_box img{
display: none;
}
#play_box img.current{
display: block;
}
#iconlist{
position: absolute;
bottom: 10px;
right: 20px;
}
#iconlist li{
float: left;
margin-left: 5px;
width: 26px;
height: 26px;
color: #fff;
text-align: center;
line-height: 26px;
background: #999;
border-radius: 13px;
cursor: pointer;

    }

    #iconlist li.current{
        background: red;
    }
</style>

</head>
<body>
<h1>輪播圖</h1>



<div id="play_box">
<div class="imagelist">





</div>
<div id="iconlist">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script>
//獲取所以圖片的一個(gè)集合
var play_box=document.getElementById('play_box');
var images = play_box.getElementsByTagName('img');
var iconlist = play_box.getElementsByTagName('li');

    var timer = setInterval(run,1000);
    
    var m = 1; //定義循環(huán)變量
    //循環(huán)函數(shù)
    function run(){
        
        if(m > 4){
           m = 0;
        }
        
         //控制圖片的變換
        controImage(m); 
        //控制按鈕變換
        controIcon(m);
        m++;
    }

    //定義函數(shù) 控制圖片變化
    function controImage(n){
        //所有的圖片隱藏
        //第n個(gè)圖片顯示
        for(var i = 0;i<images.length; i++){
            images[i].className = '';
            
        }
    
        images[n].className = 'current';
        
    }

    //定義函數(shù) 控制按鈕變換
    function controIcon(n){
        //所以按鈕變灰
        //第n個(gè)按鈕變紅
        for(var i = 0 ;i <iconlist.length;i++){
            iconlist[i].className = '';
        }
        iconlist[n].className ='current';
    }
    //鼠標(biāo)滑過 定時(shí)停止
    play_box.onmouseover = function(){
        clearInterval(timer);
    }
    //鼠標(biāo)移走 繼續(xù)定時(shí)
    play_box.onmouseout = function (){
        timer = setInterval(run,1000);
    }

    //給按鈕綁定  鼠標(biāo)滑過事件 
    for(var i = 0;i <iconlist.length; i++){
        (function(i){
            iconlist[i].onmouseover = function(){
                controIcon(i);
                controImage(i);
                m = i +1;
            }
        })(i)
    }
</script>

</body>
</html>
···

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱: 工作地點(diǎn) 崗位名...
    lilyping閱讀 1,902評(píng)論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,815評(píng)論 1 92
  • 1、垂直對(duì)齊 如果你用CSS,則你會(huì)有困惑:我該怎么垂直對(duì)齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,207評(píng)論 0 11
  • 請(qǐng)參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,190評(píng)論 2 19
  • 是過了一個(gè)沒有情人的情人節(jié)嗎?在新一天的早晨卻感覺,一切都依舊很好,一本簡(jiǎn)單的小說(shuō)足矣填充某一刻的落寞,我始終相信...
    米粒子閱讀 214評(píng)論 0 0