首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >20171024

20171024

作者头像
天天_哥
发布2018-09-29 13:53:33
4030
发布2018-09-29 13:53:33
举报
文章被收录于专栏:天天天天
1.旋转木马
一.结构
<body>
<div class="wrap" id="wrap">
   <div class="slide" id="slide">
       <ul>
           <li><a href="#">![](images/slidepic1.jpg)</a></li>
           <li><a href="#">![](images/slidepic2.jpg)</a></li>
           <li><a href="#">![](images/slidepic3.jpg)</a></li>
           <li><a href="#">![](images/slidepic4.jpg)</a></li>
           <li><a href="#">![](images/slidepic5.jpg)</a></li>
       </ul>
       <div class="arrow" id="arrow">
           <a href="javascript:void (0)" class="prev"></a>
           <a href="javascript:void (0)" class="next"></a>
       </div>
   </div>
</div>

二.样式
*{margin: 0;padding: 0}
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;}

.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    width:1200px;
    height:112px ;
    opacity: 0;
    position:absolute;
    z-index:100;

    top: 50%;
    transform: translateY(-50%);
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}

三.js
<script>
    var wrap = document.getElementById("wrap");
    var slide = document.getElementById("slide");
    var litags = slide.getElementsByTagName("li");
    var arrow = document.getElementById("arrow");
    var btns = arrow.children;
    var flag = true;
    var josn =[
        {width:300,top:50,left:50,opacity:30,zIndex:1},
        {width:600,top:100,left:0,opacity:60,zIndex:5},
        {width:800,top:200,left:200,opacity:100,zIndex:10},
        {width:600,top:100,left:600,opacity:60,zIndex:5},
        {width:300,top:50,left:850,opacity:30,zIndex:1}
    ];
    change();//页面登录了立即执行一次,赋予样式,
    //箭头显示隐藏事件
    wrap.onmouseenter = function(){
        move(arrow,{opacity:100})
    };
    wrap.onmouseleave = function(){
        move(arrow,{opacity:0})
    };

    //箭头点击事件
    //图片切换动画封装,传一个参数,用于判断是向前还是向后
    function change(which){
        if(which){
            josn.push(josn.shift());
        }else{
            josn.unshift(josn.pop());
        }
        //利用for循环对li绑定move,给对应的li传对应的json对象
        for(var i = 0;i<litags.length;i++){
            move(litags[i],josn[i],function(){
                flag =true;//再对节流阀取反
            })
        }
    }
//利用事件委托,实现按钮点击事件
    arrow.onclick = function(ev){
        var e = ev ||event;
        var target = e.target || e.srcElement;
        console.log(target.className);
        if(target.className == "prev"){
                if(flag){//传flag是阻止连续点击,节流,
               change(true);
               flag = false ;//运动完将值反向
           }
        }else if(target.className == "next"){
            console.log(target);
            if(flag){
                change(false);
                flag = false
            }
        }
    }
    //代码简化,如上
//        btns[0].onclick = function() {
//            if (flag) {
//                change(true);
//                flag = false
//            }
//        };
//    btns[1].onclick = function() {
//        if (flag) {
//            change(false);
//            flag = false
//        }
//    }
2.正则表达式
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.10.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.旋转木马
  • 2.正则表达式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档