简单的图片轮播效果

Posted 2020-10-27 cauzinc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的图片轮播效果相关的知识，希望对你有一定的参考价值。

用js代码来实现一个简单的图片轮播效果

鼠标移入图片后显示左右箭头按钮，点击就可以实现图片的切换。

技术分享图片

以下分别是html代码和js代码，欢迎批评和讨论！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        *{padding:0px; margin:0px;}
        ul{
            position: absolute;
            left:0px;
            top:0px;
            list-style-type:none;
            width:2600px;
            height:280px;
        }
        ul li{
            width:520px;
            height:280px;
            float:left;
        }
        #box{
            position:relative;
            width:520px;
            height:280px;
            margin:50px auto;
            overflow:hidden;
        }
        #btn div{
            position: absolute;
            width:20px;
            height:40px;
            background:lightskyblue;
            top:120px;
            line-height: 40px;
            text-align:center;
            opacity:0.5;
            filter:alpha(opacity:30);
            display:none;
        }
        #Rbtn{
            left:500px;
        }
    </style>
</head>
<body>

<div id="box">
    <ul id="ul">
        <li><img src="imgs/1.jpg" alt=""></li>
        <li><img src="imgs/2.jpg" alt=""></li>
        <li><img src="imgs/3.jpg" alt=""></li>
        <li><img src="imgs/4.jpg" alt=""></li>
        <li><img src="imgs/5.jpg" alt=""></li>
    </ul>
    <div id="btn">
        <div id="Lbtn"><</div>
        <div id="Rbtn">></div>
    </div>

</div>


<script src="js/animate.js"></script>
<script src="js/myJs.js"></script>

</body>
</html>

var ul = document.getElementById("ul"),
    lis = document.getElementsByTagName("li"),
    box = document.getElementById("box"),
    lbtn = document.getElementById("Lbtn"),
    rbtn = document.getElementById("Rbtn");

//还有一个问题，左键可以无限点击，但是右键必须等待效果执行完毕才可以继续点击


lbtn.onclick = function(){
    ul.insertBefore(ul.lastElementChild,lis[0]);
    ul.style.left = "-520px";
    animate(ul,0,"left");
}

rbtn.onclick = function(){
    animate(ul,-520,"left",function(){
        ul.appendChild(ul.firstElementChild);   //注意这里firstChild和firstElementChild是不同的，firstChild是text对象，不能直接拿走图片
        ul.style.left="0px";  //因为把往左拉的第一张图片重新放在最后了，因此将left的值重新设置为0
    });
}

box.onmouseover = function(){
    lbtn.style.display = "block";
    rbtn.style.display = "block";
}
box.onmouseout = function(){
    lbtn.style.display = "none";
    rbtn.style.display = "none";
}

 1 //回调函数，重新调用自身，但是此时注意，第四个参数不可以直接调用animate，因为animate函数中调用fn时，并没有带上任何参数
 2 
 3 function animate(dom,target,attr,fn){
 4     clearInterval(dom.timer);
 5     dom.timer = setInterval(function(){
 6         var domAttr = parseFloat(getAttr(dom,attr));
 7         var speed = (target - domAttr)/10;
 8         console.log(speed);
 9         if(attr == "opacity"){
10             domAttr *= 100;
11         }
12 
13         if(target>domAttr){
14             speed = Math.ceil(speed);
15         }else{
16             speed = Math.floor(speed);
17         }
18         if(target == domAttr){
19             clearInterval(dom.timer);
20             //进行判断，当没有第四个参数，即不需要回调函数时，则不执行
21             if(fn){
22                 //当重复调用时，this的指向会改变，因此要在dom的作用域下调用fn函数才不会出错
23                 fn.call(dom);
24             }
25         }else{
26             if(attr=="opacity"){
27                 dom.style[attr] = (domAttr + speed)/100;
28                 dom.style.filter = "alpha(opacity:"+(domAttr + speed)+");"
29             }else{
30                 dom.style[attr] = domAttr + speed +"px";
31             }
32         }
33     },30);
34 }
35 
36 function getAttr(dom,attr){
37     if(dom.currentStyle){
38         return dom.currentStyle[attr];
39     }else{
40         return getComputedStyle(dom,null)[attr];
41     }
42 }

以上是关于简单的图片轮播效果的主要内容，如果未能解决你的问题，请参考以下文章