css 实现3d旋转

最新推荐文章于 2024-02-19 08:56:23 发布

Albert_Tiger

最新推荐文章于 2024-02-19 08:56:23 发布

阅读量1.5k

点赞数

分类专栏： js插件

本文链接：https://blog.csdn.net/qq_35425276/article/details/79825618

版权

js插件专栏收录该内容

81 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            margin: 100px auto;
            width: 670px;
            height: 320px;
            /*border:1px solid red;*/
            position: relative;
        }

        .box1 ul li {
            list-style: none;
            width: 670px;
            height: 320px;
            /*display: none;*/
            position:absolute;
            opacity:0;
        }
        .box1 ul li.cur1{
            opacity:1;
            filter:alpha(opacity=0);
        }

        .box1 ul li img {
            width: 670px;
            height: 320px;
        }

        .box2 {
            position: absolute;
            width: 100%;
            top: 50%;
            margin-top: -27px;
            left: 0;
            cursor: pointer;
            z-index: 3;
        }

        .box2 .left {
            float: left;
            width: 55px;
            height: 55px;
            background: url(images/slide-btnL.png);
        }

        .box2 .right {
            float: right;
            width: 55px;
            height: 55px;
            background: url(images/slide-btnR.png);
        }

        .box1 ol {
            position:absolute;
            left:50%;
            margin-left: -68px;
            bottom: 10px;
            width: 135px;
        }

        .box1 ol li {
            list-style: none;
            float: left;
            width: 7px;
            height: 7px;
            border-radius: 6px;
            background: url(images/ico.png) no-repeat -138px -133px;
            margin: 0 10px;
            cursor: pointer;
        }

        .box1 ol li.cur2 {
            background: url(images/ico.png) no-repeat -125px -133px;
        }
    </style>
</head>
<body>
    <div class="box1" id="box1">
        <ul>
            <li class="cur1"><a href="#"><img src="images/aaa.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/bbb.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/ccc.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/ddd.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/eee.jpg" alt=""/></a></li>
        </ul>
        <div class="box2">
            <span class="left"></span>
            <span class="right"></span>
        </div>
        <ol>
            <li class="cur2"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script src="js/animate.js"></script>
    <script>
        //        1/获取元素
        var box1 = document.getElementById("box1");
        var ullis = box1.children[0].children;
        var spans = box1.children[1];
        var leftArr=spans.children[0];
        var rightArr=spans.children[1];
        var ollis = box1.children[2].children;
        //事件监听
        var count=0;
        var timer=null;
        for (var i = 0; i < ollis.length; i++) {
            ollis[i].index=i;
            ollis[i].onclick= function () {
                for(var i = 0; i < ollis.length; i++){
                    ollis[i].className="";
                    animate(ullis[i],{"opacity":0})
                }
                ollis[this.index].className="cur2";
                count=this.index
                animate(ullis[count],{"opacity":1})
            }
        }
        rightArr.onclick=function (){
            if(ullis[count].isanimate) return;
            animate(ullis[count],{"opacity":0});
            count++;
            if(count>=ullis.length){
                count=0;
            }
            for (var i = 0; i < ullis.length; i++) {
                ollis[i].className = "";
            }
            ollis[count].className = "cur2";
            animate(ullis[count],{"opacity":1});
        }
        leftArr.onclick=function (){
            if(ullis[count].isanimate) return;
            animate(ullis[count],{"opacity":0});
            count--;
            if(count<0){
                count=ullis.length-1;
            }
            for (var i = 0; i < ullis.length; i++) {
                ollis[i].className = "";
            }
            ollis[count].className = "cur2";
            animate(ullis[count],{"opacity":1});
        }
        box1.onmouseover=function(){
            clearInterval(timer);
        }
        box1.onmouseout=function(){
            autoMove();
        }
        autoMove()
        function autoMove(){
            clearInterval(timer);
            timer=setInterval(function(){
                rightArr.click();
            },1500)
        }

    </script>
</body>
</html>

Albert_Tiger

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css 实现3d旋转

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin: 0;
复制链接

扫一扫