旋转木马-轮播

最新推荐文章于 2021-12-26 10:24:28 发布

秋天1014童话

最新推荐文章于 2021-12-26 10:24:28 发布

阅读量602

点赞数 1

分类专栏： web前端 javaScript CSS3

本文链接：https://blog.csdn.net/u013217071/article/details/54583920

版权

web前端同时被 3 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

主要html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <script type="text/javascript" src="js/animate.js"></script>
</head>
<body>
    <div class="w-wrap" id="js_wrap">
        <div class="wrap-slide" id="wrap_slide">
            <ul>
                <li><a href="#"><img src="images/slidepic1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/slidepic2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/slidepic3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/slidepic4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/slidepic5.jpg" alt=""></a></li>
                <!-- <li><a href="#"><img src="images/slidepic6.jpg" alt=""></a></li> -->
            </ul>
            <div class="wrap-slide-arrow" id="wrap_slide_arrow">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>
    <script>
        function $(id){ return document.getElementById(id);}
        var js_wrap = $("js_wrap"); 
        var wrap_slide = $("wrap_slide"); 
        var wrap_slide_arrow = $("wrap_slide_arrow");
        var lis = wrap_slide.children[0].children;


        var json = [
            {
                //1
                width: 400,
                top: 20,
                left: 50,
                opacity: 20,
                z: 2
            },
            {
                //2
                width: 600,
                top: 70,
                left: 0,
                opacity: 80,
                z: 3
            },
            {
                //3
                width: 800,
                top: 100,
                left: 200,
                opacity: 100,
                z: 4
            },
            {
                //4
                width: 600,
                top: 70,
                left: 600,
                opacity: 80,
                z: 3
            },
            {
                //5
                width: 400,
                top: 20,
                left: 750,
                opacity: 20,
                z: 2
            }/*,
            {
                //6
                width: 300,
                top: 10,
                left: 400,
                opacity: 10,
                z: 1
            }*/
        ]
        change(); //将各个图片按照json铺开层次
        var jieliu = true;
        //两个按钮点击事件
        var as = wrap_slide_arrow.children;
        for(var k in as){
            as[k].onclick = function(){
                if(this.className == "prev"){
                    /*alert("左侧按钮");*/
                    //所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个
                    if(jieliu == true){
                        change(false);
                        jieliu = false;
                    }

                }else if(this.className == "next"){
                    /*alert("右侧按钮");*/
                    //所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个
                    if(jieliu == true){
                        change(true);
                        jieliu = false;
                    }
                }
            }
        }
        function change(flag){
            if(flag){
                //所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个           
                json.unshift(json.pop());
            }else{
                //所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个
                json.push(json.shift());
            }
            for(var k in json){
                animate(lis[k],{
                    width: json[k].width,
                    top: json[k].top,
                    left: json[k].left,
                    opacity: json[k].opacity,
                    zIndex: json[k].z
                },function(){ jieliu = true;}); //当动画执行完，执行回调函数，此时置节流为true
            }
        }
        var timer = null;
        timer = setInterval(autoPlay,2000);
        function autoPlay(){
            if(jieliu == true){
                change(true);
                jieliu = false;
            }
        }

        js_wrap.onmouseover = function(){
            clearInterval(timer);
            animate(wrap_slide_arrow,{opacity:100});
        }
        js_wrap.onmouseout = function(){
            clearInterval(timer);
            timer = setInterval(autoPlay,2000);
            animate(wrap_slide_arrow,{opacity:0});
        }

        /*js_wrap.onmouseover = function(){
            animate(wrap_slide_arrow,{opacity:100});
        }
        js_wrap.onmouseout = function(){
            animate(wrap_slide_arrow,{opacity:0});
        }*/
    </script>
</body>
</html>

主要css代码：

/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.w-wrap{
    width: 1200px;
    margin: 100px auto;
}
.wrap-slide{
    position: relative;
}
.wrap-slide li{
    position: absolute;
    left: 200px;
    top: 0;
}
.wrap-slide li img{
    width: 100%;
}
.wrap-slide-arrow{
    opacity: 0;
    position: relative;
}
.prev,.next{
    width: 76px;
    height: 112px;
    position: absolute;
    top: 50%;
    margin-top: -56px;
    background: url(../images/prev.png) no-repeat;
}
.next{
    right: 0;
    background: url(../images/next.png) no-repeat;
}

秋天1014童话

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转木马-轮播

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
复制链接

扫一扫