$(薛定谔的喵)
$(薛定谔的喵)

旋转木马图片效果图，轮播图

旋转木马图片效果图，轮播图

  • 老规矩先上一张示例图：
    旋转木马图片效果图，轮播图_第1张图片

HTML代码：

<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="images/slidepic1.jpg" alt=""/>a>li>
      <li><a href="#"><img src="images/slidepic3.jpg" alt=""/>a>li>
      <li><a href="#"><img src="images/slidepic2.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>
    ul>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrLeft">a>
      <a href="javascript:;" class="next" id="arrRight">a>
    div>
  div>
div>

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;
}

.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 {
    opacity: 0;
}

.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);
}

一些定义：

//获取ID
function my$(id) {
    return document.getElementById(id);
}
//渐渐动画函数
function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//假设都达到了目标
        for(var attr in json){
            if(attr=="opacity"){//判断属性是不是opacity
                var current= getAttrValue(element,attr)*100;
                //每次移动多少步
                var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current/100;
            }else if(attr=="zIndex"){//判断属性是不是zIndex
                element.style[attr]=json[attr];
            }else{//普通的属性

                //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
                var current= parseInt(getAttrValue(element,attr))||0;
                //每次移动多少步
                var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current+"px";
            }
            if(current!=target){
                flag=false;//如果没到目标结果就为false
            }
        }
        if(flag){//结果为true
            clearInterval(element.timeId);
            if(fn){//如果用户传入了回调的函数
                fn(); //就直接的调用,
            }
        }
    },10);
}

Arr Config

  • 这里主要在于定义五张图的样式效果
  • 定义五张图的层级，透明度，大小，位置，从而达到平铺呈现的样式
  • 通过对象进行json格式封装，组成数组，不同的数组下标代表着不同的样式
  • 到时候我们会遍历这个数组
  //配置数组对象
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },//0
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },//1
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },//2
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },//3
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      }//4

    ];
<script>
        //页面加载的事件
        window.οnlοad=function () {
          //1---散开图片
            //获取所有的li
          var flag=true;//----假设所有的效果都执行完毕了
          var list=my$("slide") .getElementsByTagName("li");
            function assign(){
                for (var i=0;i//设置每个li的位置，透明度，left，top
                    animate(list[i],config[i],function () {
                        //插入回调函数，待上一次动画走完之后，让flag的值重新变为true
                        flag=true;
                    })
                }
            };
            assign();

            //右边按钮
            my$("arrRight").οnclick=function(){
              if (flag){
                  flag=false;
                  //删除数组中第一个元素，把这个元素追加到最后
                  config.push(config.shift());
                  assign();//重新分配
              }
            };
            //左边按钮
            //删除最后一个元素，吧这个元素追加到开头
            my$("arrLeft").οnclick=function(){
                if (flag){
                    flag=false;
                    config.unshift(config.pop());
                    assign();//重新分配
                }
            };
            //鼠标进入，左右焦点显示
            my$("slide").οnmοuseοver=function () {
                //调用一个动画渐渐的效果
                animate(my$("arrow"),{"opacity":1})
            };
            //鼠标离开,左右焦点隐藏
            my$("slide").οnmοuseοut=function () {
                //调用一个动画渐渐的效果
                animate(my$("arrow"),{"opacity":0})
            };
        };
    script>

逻辑

  • 给左右2个角标注册，鼠标进入/退出事件，分别注册渐渐动画透明度的显示和隐藏
  • 这个实现效果是通过左右2个小角标的点击事件（onclick）来触发数组的删除和追加
  • 即：config.push(config.shift());
    • config.unshift(config.pop());
  • 在删除追加以后我们需要重新分配一下config 就是我前面定义的assign 这个方法
  • flag这个变量的值用Boolean类型来控制动画的执行次数，在上一次动画未执行完毕是不会执行下一次的动画的，这样就防止动画加快，和混乱变小
  • 我们在开始flag=为true ；假设所有效果都执行完毕将要开始下一次效果，在执行完一次动画animate之后吧flag赋值为false；最后在callback 回调函数重新吧flag赋值为true；

你可能感兴趣的:(web前端)