用transition以及opacity实现轮播图

最新推荐文章于 2022-03-27 09:44:24 发布

Harding Duan

最新推荐文章于 2022-03-27 09:44:24 发布

阅读量1.9k

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_42669658/article/details/81158040

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

用transition以及opacity实现轮播图：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;list-style:none;}                                   
            .slide{                                                                                              
                width: 1000px;                                                                        
                height: 600px;                                                                         
                position:relative;
                }
            .viewbox li{
                float: left;
                width: 1000px;
                height: 600px;
                position: absolute;
                left:0;
                transition:.5s;
                }
            .viewbox li img{width: 100%;height: 100%;}
            .arrow p{
                position: absolute;
                width: 50px;
                height: 130px;
                line-height: 130px;
                font-size: 60px;
                font-weight:bold;
                color:#fff;
                background: rgba(0,0,0,0.5);
                text-align:center;
                top:50%;
                margin-top:-65px;
                cursor:pointer;
                }
            .arrow .next{right:0;}
            .dots li{
                width: 12px;
                height: 12px;
                background: deepskyblue;
                border-radius:50%;
                margin:0 5px;
                float: left;
                border:1px solid deepskyblue;
                transition:0.3s;
                cursor:pointer;
                }
            .dots{
                position: absolute;
                bottom:30px;
                width:200px;
                height:20px;
                left:50%;
                margin-left:-50px;
                }
            .dots li.active{
                background:#fff;
            }
        </style>
    </head>
    <body>
        <div class="slide">
            <ul class="viewbox">
                <li><img src="../6选项卡/img/01.jpg" alt="" /></li>
                <li><img src="../6选项卡/img/02.jpg" alt="" /></li>
                <li><img src="../6选项卡/img/03.jpg" alt="" /></li>
                <li><img src="../6选项卡/img/04.jpg" alt="" /></li>
                <li><img src="../6选项卡/img/05.jpg" alt="" /></li>
            </ul>    
            <div class="arrow">
                <p class="prev"><</p>
                <p class="next">></p>
            </div>
            <ul class="dots">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        var viewbox=document.getElementsByClassName("viewbox")[0]
        var img=viewbox.getElementsByTagName("li")
        var prev=document.getElementsByClassName("prev")[0]
        var next=document.getElementsByClassName("next")[0]
        var dots=document.getElementsByClassName("dots")[0]
        var aLi=dots.getElementsByTagName("li")
        var index=0
        next.onclick=function(){
            index++
            if(index>4){
                index=0
            }
            for (var i = 0; i < img.length; i++) {
                img[i].style.opacity=0
                aLi[i].className=""
            }
            img[index].style.opacity=1
            aLi[index].className="active"    
        }
        prev.onclick=function(){
            index--
            if(index<0){
                index=4
            }
            for (var i = 0; i < img.length; i++) {
                img[i].style.opacity=0
                aLi[i].className=""
            }
            img[index].style.opacity=1
            aLi[index].className="active"    
        }
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].count=i
            aLi[i].onclick=function(){
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className=""
                    img[i].style.opacity=0
                }
                this.className="active"
                img[this.count].style.opacity=1
                index=this.count
            }
        }
    </script>
</html>

Harding Duan

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用transition以及opacity实现轮播图

用transition以及opacity实现轮播图：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css&qu
复制链接

扫一扫