首页 > 代码库 > 定时图片轮播图

定时图片轮播图

2024-07-04 02:58:07   232人阅读

先是HTML部分

<div id="alternate">

  <ul class="img_list clear">
      <li><a href="#"><img src="1.jpg" /></a></li>
      <li><a href="#"><img src="2.jpg" /></a></li>
      <li><a href="#"><img src="3.jpg" /></a></li>
      <li><a href="#"><img src="4.jpg" /></a></li>
      <li><a href="#"><img src="5.jpg" /></a></li>
  </ul>
  <a href="javascript:;" class="btn_left"></a>
  <a href="javascript:;" class="btn_right"></a>
</div>

样式部分：

<style>
body,ul{padding:0;margin:0}
li{list-style:none;}

#alternate{
    width:900px;
    position:relative;
    margin:30px auto;
    overflow:hidden;
}

.btn_left{
    width:60px;
    height:60px;
    position:absolute;
    top:223px;
    left:10px;
    background:url(btn.gif) no-repeat;
    opacity:0.3;
    filter:alpha(opacity:30);
}
.btn_left:hover{
    opacity:1;
    filter:alpha(opacity:30);
}

.btn_right{
    width:60px;
    height:60px;
    position:absolute;
    top:223px;
    right:10px;
    background:url(btn.gif) no-repeat 0 -60px;
    opacity:0.3;
    filter:alpha(opacity:30);
}
.btn_right:hover{
    opacity:1;
    filter:alpha(opacity:30);
}


.img_list{
    width:45000px;
    position:relative;
    left:0;
}
.img_list li{
    float:left;
}

.clear:after{
    clear:both;
    display:block;
    content:"";
    height:0;
    overflow:hidden;
    visibility:hidden;
}

</style>

然后是JS方面：

 

先上一个通过CLASS来获取样式，前面的随笔文章当中有发布过：通过正则写一个较为完美的getByClass函数

    function getByClass(oParent,sClass){
    var aChild = oParent.getElementsByTagName("*"),
        result = [];
    for(var i =0;i<aChild.length;i++){
        if(aChild[i].className.match(new RegExp("(\\s|^)" + sClass+ "(\\s|$)"))){ //判断是否有该class
            result.push(aChild[i]);
        };
    };
    return result;
    };

 

链接外部样式，可以参考 多用途运动框架

<script src="http://www.mamicode.com/move.js"></script>

主体部分：

<script>
window.onload = function(){
    var oUl = document.getElementById("alternate").getElementsByTagName("ul")[0];
    var aLi = oUl.getElementsByTagName("li");
    var aPrev = getByClass(document.getElementById("alternate"),"btn_left")[0];
    var aNext = getByClass(document.getElementById("alternate"),"btn_right")[0];
    var iNow = 0;
    var timer;
    //oUl.innerHTML += oUl.innerHTML;
    
    oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
    
    aNext.onclick = function(){
        clearInterval(timer);  //每次点击按钮的时候清楚定时器
        if(iNow < aLi.length-1){
            iNow++;
        }else{
            iNow = 0;
        };
        move(oUl,{left:-aLi[0].offsetWidth*iNow});
        timer= setInterval(rollNext,3000); //运行完点击后的代码，才开始定时器，这样确保每次运动的间隔是一样的
    };
    aPrev.onclick = function(){
        clearInterval(timer);
        if(iNow !==0){
            iNow--;
        }else{
            iNow = aLi.length-1;
        };
        move(oUl,{left:-aLi[0].offsetWidth*iNow});
        timer= setInterval(rollNext,3000);
    };
    
    timer= setInterval(rollNext,3000);
    
    function rollNext(){
                if(iNow < aLi.length-1){
            iNow++;
        }else{
            iNow = 0;
        };
            move(oUl,{left:-aLi[0].offsetWidth*iNow});
    }
    
    function getByClass(oParent,sClass){
    var aChild = oParent.getElementsByTagName("*"),
        result = [];
    for(var i =0;i<aChild.length;i++){
        if(aChild[i].className.match(new RegExp("(\\s|^)" + sClass+ "(\\s|$)"))){ //判断是否有该class
            result.push(aChild[i]);
        };
    };
    return result;
    };
};

</script>

 


联系
我们