简易轮播图

直接贴代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图V3.0版</title>
<link rel="stylesheet" href="css.css" type="text/css">
</head>

<body>
<div id="slide">
    <ul class="slide_img" id="slide_img">
        <li><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
    </ul>
    <ul class="slide_btn" id="slide_btn">
        <li class="btn_active">●</li>
        <li>●</li>
        <li>●</li>
        <li>●</li>
        <li>●</li>
    </ul>
    <div id="btn_pre"><a></a></div>
    <div id="btn_next"><a></a></div>
</div>
</body>
<script src="slide.js" type="text/javascript" ></script>
</html>
HTML
/* 样式重置 */
body,div,ul,ul li,img{
    margin:0;
    padding:0;
}
body{
    background: #000;
}

img{
    border:none;
}

li{
    list-style: none;
}

/* 主要样式 */
#slide{
    width:670px;
    height:240px;
    margin:100px auto;
    position:relative;
    background:#fff;
    overflow: hidden;
}
.slide_img{
    position: absolute;
    width:3350px;
    height:240px;
    top:0;
    left:0;
}
.slide_btn{
    position: absolute;
    width:150px;
    height:30px;
    top:210px;
    left:520px;
}

.slide_img li{
    float:left;
}
.slide_btn li{
    display: block;
    line-height: 30px;
    color:#999;
    float:left;
    margin-right:6px;
}
.slide_btn .btn_active{
    color:#920;
}

/* 左右切换按钮 */
#btn_pre a,#btn_next a{
    width:25px;
    height:35px;
    z-index: 2;
    position:absolute;
}
#btn_pre a{
    background:url(images/pre_next.png) 0 0;
    left:0px;
    top:102px;
}

#btn_next a{
    background:url(images/pre_next.png) 0 -35px;
    left:645px;
    top:102px;
}
CSS
功能介绍：
1.加入了自动播放
2.加入了鼠标移入关闭定时器，移出开启定时器
3.解决了移出鼠标之后不连续播放的bug
4.加入了左右切换功能
5.加入了运动划入划出
BUG：
在最后一张图向第一张图切换时，会出现短暂空白
*/
var oDiv=document.getElementById('slide');
var oUl1=document.getElementById('slide_img');
var oUl2=document.getElementById('slide_btn');
var aImg=oUl1.getElementsByTagName('li');
var aBtn=oUl2.getElementsByTagName('li');

var oBtnL=document.getElementById('btn_pre').getElementsByTagName('a')[0];
var oBtnR=document.getElementById('btn_next').getElementsByTagName('a')[0];

for(var i=0;i<aBtn.length;i++){

}


var timer=null;

var timer_auto=null;

var speed=null;

var j=0;


slide(aBtn,aImg);
autoSlide(aBtn,aImg);

//轮播图主函数
function slide(btns,imgs){
    for(var i=0;i<btns.length;i++){
        btns[i].index=i;
        btns[i].onmouseover=function(){
            overslide(this,btns,imgs);
        };
    }
}

//鼠标触发切换
function overslide(that,btns,imgs){
    clearStyle(btns);
    that.style.color="#920";
    move(oUl1,-(that.index)*imgs[0].offsetWidth);
    //获取索引值
    j=that.index+1;
}

//向左点击切换
oBtnR.onclick=function(){
    j++;
    if(j>=aBtn.length) {
        oUl1.style.left=aImg[0].offsetWidth+'px';
        j=0;
    }
    clearStyle(aBtn);
    aBtn[j].style.color="#920";
    move(oUl1,-j*aImg[0].offsetWidth);
}

//向右点击切换
oBtnL.onclick=function(){
    j--;
    if(j<=-1) {
        oUl1.style.left=-aImg[0].offsetWidth*5+'px';
        j=4;
    }
    document.title=j;
    clearStyle(aBtn);
    aBtn[j].style.color="#920";
    move(oUl1,-j*aImg[0].offsetWidth);
}

//鼠标移入时关闭定时器
oDiv.onmouseover=function(){
    clearInterval(timer_auto);
}

//鼠标移除时开始定时器
oDiv.onmouseout=function(){
    autoSlide(aBtn,aImg);
}

//自动播放功能函数
function autoSlide(btns,imgs){
    clearInterval(timer_auto);
    timer_auto=setInterval(function(){
        clearStyle(btns);
        if(j>=btns.length) {
            oUl1.style.left=imgs[0].offsetWidth+'px';
            j=0;
        }
        btns[j].style.color="#920";
        move(oUl1,-j*imgs[0].offsetWidth);
        j++;
    },3000);
}

//清理样式
function clearStyle(btns){
    for(var i=0;i<btns.length;i++){
        btns[i].style.color="#999";
    };
}


//运动函数
function move(obj,target){
    clearInterval(timer);
    if(obj.offsetLeft<=target){
        speed=67;
    }else{
        speed=-67;
    }
    timer=setInterval(function(){
        document.title=obj.offsetLeft;
        if(obj.offsetLeft==target) {
            clearInterval(timer);
        }else{
            obj.style.left=obj.offsetLeft+speed+'px';
        }
    },30)
}
JS
posted @ 2013-10-24 21:37  Gresic  阅读(465)  评论(0)  编辑  收藏  举报