利用js写的轮播图
咱们先来看看html部分:
<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="lunbotu.css" />
        <script src="lunbotu.js"></script>
</head>
<body>
        <div id="box">
                <ul>
                        <li><img src="img/img1.jpg"/></li>
                        <li><img src="img/img2.jpg"/></li>
                        <li><img src="img/img3.jpg"/></li>
                        <li><img src="img/img4.jpg"/></li>
                        <li><img src="img/img5.jpg"/></li>
                        <li><img src="img/img6.jpg"/></li>
                        <li><img src="img/12.jpg"/></li>
                        <li><img src="img/13.jpg"/></li>
                </ul>
               
                <div  id="left"><img src="img/copy_1_03.png"/></div>
                <div  id="right"><img src="img/copy_1_05.png"/></div>
               
                <div id="area">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                        <span>7</span>
                        <span>8</span>
                       
                </div>
        </div>
</body>
</html>


接下来就是css部分了:
* {
        margin: 0;
        padding: 0;
}
               
#box {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 60px auto;
        position: relative;
        overflow: hidden;
}
               
ul {
        width: 4000px;
        height: 500px;
        position: absolute;
        top: 0;
        left: 0;
}
               
li {
        display: block;
        width: 500px;
        height: 500px;
        float: left;
}
               
img {
        display: block;
        width: 500px;
        height: 500px;
}
               
#left {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 10px;
        top: 225px;
        opacity: 0.3;
        filter: alpha(opacity: 30);
}
               
#right {
        width: 50px;
        height: 50px;
        position: absolute;
        right: 10px;
        top: 225px;
        opacity: 0.3;
        filter: alpha(opacity: 30);
}
               
#left img {
        width: 50px;
        height: 50px;
}
               
#right img {
        width: 50px;
        height: 50px;
}
               
#area {
        width: 1600px;
        height: 20px;
        position: absolute;
        left: 170px;
        top: 460px;
}
               
#area span {
        text-align: center;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        background: #ffffff;
        float: left;
        margin-left:20px;
}
#area span:hover{
        color:red;
}
再然后不用多说了就是js了:
function $(id){
        return document.getElementById(id)
}


window.onload=function(){
        
var _box=$("box");
var iLi=_box.children[0].children[0].cloneNode(true);
_box.children[0].appendChild(iLi);

var _ul=_box.children[0];
_ul.style.width=iLi.offsetWidth*(_ul.children.length)+"px";


var index=0;
var time;
function zou(){
        time=setTimeout(function(){
                index++;
                move(_ul,index*(-500))
        },1000)
}
zou();

function move(ele,pos){
        clearInterval(ele.timer);
        ele.timer=setInterval(function(){
                var speed=(pos-ele.offsetLeft)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);        
                if(ele.offsetLeft==pos){
                        clearInterval(ele.timer);
                        if(ele.offsetLeft==(-4000)){
                                ele.style.left=0;
                                index=0;
                        }
                        zou();
                }else{
                        ele.style.left=ele.offsetLeft+speed+"px";
                }        
        },30)
}

var _left=$("left");
var _right=$("right");

_left.onclick=function(){
        
        clearTimeout(time);        
        clearInterval(_ul.timer);
        
        index--;
        if(index<0){
                index=7;
                _ul.style.left="-4000px";
        }        
        move(_ul,index*(-500));
}
_right.onclick=function(){
        
        clearTimeout(time);        
        clearInterval(_ul.timer);
        
        index++;        
        if(index>8){
                index=0;
                _ul.style.left=0;
        }
        move(_ul,index*(-500));
}




var _span=$("area").getElementsByTagName("span");

for(var  i=0;i<_span.length;i++){
        _span.index=i;
        _span.onmouseenter=function(){
                //console.log(this.index)
                clearTimeout(time);        
                clearInterval(_ul.timer);
                index=this.index;
                move(_ul,index*(-500));
        }

}

}
阅读更多
文章标签: 轮播
想对作者说点什么? 我来说一句

js轮播图

2017年11月08日 52B 下载

JS原声轮播图

2017年12月12日 803KB 下载

手机轮播图3D插件

2018年02月07日 2.68MB 下载

没有更多推荐了,返回首页

不良信息举报

利用js写的轮播图

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭