原生js无缝轮播图的写法

最新推荐文章于 2024-04-08 16:26:29 发布

无奈html5

最新推荐文章于 2024-04-08 16:26:29 发布

阅读量232

点赞数

文章标签： js javascript html css

本文链接：https://blog.csdn.net/html5_javascript/article/details/107818105

版权

js 无缝轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        #bigbox {
            margin-left: 250px;
            position: relative;
            width: 1000px;
            height: 500px;
            overflow: hidden;
        }

        #box {
            position: absolute;
            width: 4000px;
        }

        #box li {
            float: left;
        }

        #box li img {
            width: 1000px;
            height: 500px;
        }
        #btn span{
            margin-top: -25px;
            position: absolute;
            width: 50px;
            height: 50px;
            font-size: 50px;
            line-height: 50px;
            background: rgba(0,0,0,0.3);
            color: #fff;
            cursor: pointer;
            top:50%
          
        }
        #btn span:first-child{
            left: 10px;
        }
        #btn span:last-child{
           right:10px;
        }
        #circle{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        #circle li{
           float: left;
           width: 30px;
           height: 30px;
           background:rgba(255,255,255,0.5);
           color: #000;
           text-align: center;
           line-height: 30px;
           cursor: pointer;
           border-radius: 50%;
           margin: 10px;
        }
        #circle .hover{
            background: red;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="bigbox">
        <ul id="box">
            <li><img src="../img/1.jpg" alt=""></li>
            <li><img src="../img/2.jpg" alt=""></li>
            <li><img src="../img/3.jpg" alt=""></li>
            <li><img src="../img/4.jpg" alt=""></li>
            <li><img src="../img/1.jpg" alt=""></li>
        </ul> 
         <!-- <div id="btn">
        <span>&lt;</span>
        <span>&gt;</span>
    </div>
    <ul id="circle">
        <li class="hover">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul> -->
    </div>
  
</body>
<script src="../js/startMove.js"></script>
<script src="../js/objShow.js"></script>
<script>
    var objShow=new carousel();
    objShow.arrows();
    objShow.dot();
</script>

</html>

引入的js文件

引入的startMove.js元素运动的封装函数

function startMove(domobj, json, fn) {
    clearInterval(domobj.timer);
    domobj.timer = setInterval(function () {
        var flag = true; //假设所有的属性都达到了目标值
        for (var attr in json) {
            var iTarget = json[attr]; //取到目标值
            if (attr == "opacity") { //透明度的处理
                var iCur = parseInt(getStyle(domobj, "opacity") * 100);
            } else {
                var iCur = parseInt(getStyle(domobj, attr)); //取到当前值
            }
            var iSpeed = (iTarget - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (attr == "opacity") {
                domobj.style.opacity = (iCur + iSpeed) / 100;
                domobj.style.filter = "alpha(opacity=" + (iCur + iSpeed) + ")";
            } else {
                domobj.style[attr] = iCur + iSpeed + "px";

            }

            if (iTarget != iCur) { //只要有没达到的 flag为false
                flag = false;
            }
        }
        if (flag) { //只有在flag为true时才清定时器
            clearInterval(domobj.timer);
            if (fn) {
                fn();
            }
        }

    },50)
}

function getStyle(domobj, attr) {
    if (window.getComputedStyle) {
        return getComputedStyle(domobj, null)[attr];
    }
    return domobj.currentStyle[attr];
}

引入的objShow.js 面向对象的写法

function  carousel(){
    this.bigBox=document.getElementById("bigbox");
    this.Box=document.getElementById("box");
    this.oLi=this.Box.children;
    this.len=this.oLi.length;
    this.perWidth=this.oLi[0].offsetWidth;
    this.Box.style.width=this.len*this.perWidth+"px";
    this.timer=null;
    this.count=0;
    this.autoMove();
    this.clearInterval();

}
carousel.prototype.move=function(){
    this.count++;
    if(this.count==this.len){
        this.count=1;
        this.Box.style.left=0;
    }
    if(this.count==-1){
        this.count=this.len-2;
        this.Box.style.left=-(this.len-1)*this.perWidth+"px";
    }
    if(this.aLi){//如果某个轮播图没有小圆点，直接用this.aLi会出错
        for(let i=0;i<this.aLi.length;i++){
            this.aLi[i].className="";
        }

         if(this.count==this.len-1){
        this.aLi[0].className="hover";
    }else{
        this.aLi[this.count].className="hover";
    }
    }

   

    startMove(this.Box,{
        "left":-this.count*this.perWidth
    });


}
//自动轮播
carousel.prototype.autoMove=function(){
    this.timer=setInterval(()=>{
        console.log("aa");
        this.move();
    },2000)
}
//箭头轮播
carousel.prototype.arrows=function(){
    var oBtn=document.createElement("div");
    oBtn.id="btn";
    oBtn.innerHTML="<span>&lt;</span><span>&gt</span>"
    this.bigBox.appendChild(oBtn);
    var oSpan=oBtn.children;
    oSpan[0].onclick=()=>{
        this.count-=2;
        this.move();
    }
    oSpan[1].onclick=()=>{
        this.move();
    }
}
//圆点轮播
carousel.prototype.dot=function(){
    var oUl=document.createElement("ul");
    oUl.id="circle";
    var str="";
    for(let i=0;i<this.len-1;i++){
        str+=`<li>${i+1}</li>`
    }
    oUl.innerHTML=str;
    this.bigBox.appendChild(oUl);
    this.aLi=oUl.children;
    this.aLi[0].className="hover";
    for(let i=0;i<this.aLi.length;i++){
        this.aLi[i].onmouseover=()=>{
            this.count=i-1;
            this.move();
        }
    }
}

无奈html5

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js无缝轮播图的写法

js 无缝轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫