旋转木马效果轮播图特效

旋转木马轮播图特效

共有五张图片,每张图片排列的位置是以中间为对称的。图片大小,透明度不相同,但对称的图片的样式是相同的。

呈现一种立体的轮播效果。

效果图如下:

旋转木马效果轮播图特效_第1张图片

做法:
1. 设置布局

其中:

     在一个大盒子box中放置一个ul,ul内有五个li标签,分别用来放置图片。

并有两个div用作切换图片的左右箭头

<div class="box">
   <ul>
      <li class="li1"><img src="images/slidepic1.jpg" alt="">li>
      <li class="li2"><img src="images/slidepic2.jpg" alt="">li>
      <li class="li3"><img src="images/slidepic3.jpg" alt="">li>
      <li class="li4"><img src="images/slidepic4.jpg" alt="">li>
      <li class="li5"><img src="images/slidepic5.jpg" alt="">li>
   ul>
   <div class="left"><img src="images/prev.png" alt="">div>
   <div class="right"><img src="images/next.png" alt="">div>
div>
2. 设置样式

使box居中显示,并设置每一个li绝对定位,然后设置了左右箭头的相关样式。

.box {
        text-align: center;
        position: relative;
        width: 1260px;
        height: 600px;
        margin: 0 auto;
    }
    ul {
        width: 800px;
        margin: 0 auto;
    }
    li {
        list-style: none;
        position: absolute;

    }
    li img {
        width: 100%;
        height: 100%;
    }
    .left {
        cursor: pointer;
        position: absolute;
        z-index: 5;
        top: 50%;
        left: 100px;
        opacity: 0;
    }
    .right {
        cursor: pointer;
        position: absolute;
        z-index: 5;
        top: 50%;
        right: 100px;
        opacity: 0;
    }
3. JS中定义一个数组用来设置这五个li的位置(绝对定位)
var jsonArr = [
        //第一张li位置
        {   "opacity": 30,
            "zIndex": 1,
            "top": 80,
            "left": 80,
            "width": 400,
            "height": 300
        },
        //第二张li位置
        {   "opacity": 80,
            "zIndex": 2,
            "top": 140,
            "left": 0,
            "width": 650,
            "height": 400
        },
        //第三张li位置
        {   "opacity": 100,
            "zIndex": 3,
            "top": 110,
            "left": 250,
            "width": 800,
            "height": 500
        },
        //第四张li位置
        {   "opacity": 80,
            "zIndex": 2,
            "top": 140,
            "left": 640,
            "width": 650,
            "height": 400
        },
        //第五张li位置
        {   "opacity": 30,
            "zIndex": 1,
            "top": 80,
            "left": 830,
            "width": 400,
            "height": 300
        }
    ];
4. 兼容性写法获取样式值
function getStyle(ele,attr) {
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}
5. 定义一个animate()方法(缓动动画方法)
//重新封装animate方法  解决某些兼容性问题如:opacity,zIndex等兼容性问题
function animate(ele,json,fn) {
   clearInterval(ele.timer);
   ele.timer = setInterval(function () {
       //利用开闭原则,判断所有属性是否一定全部到位,全部到位就清除定时器,否则将继续
       var bool = true;
       for(var i in json){
           //parseInt(getStyle(ele,i)) || 0
           //由于getStyle函数返回的类型不是number类型,所以要用进行转为number类型
           // || 0 是为了避免出现某些属性没有定义而导致报错
           var leader;
           if(i == "opacity"){
              leader = getStyle(ele,i)*100 || 1;
              //用getStyle(ele,i)得到的opacity值时小数制,所以要乘以100
           }else {
              leader = parseInt(getStyle(ele,i)) || 0;
           }
           var step = (json[i]-leader)/10;
           step = step>0?Math.ceil(step):Math.floor(step);
           leader = leader+step;
           //要进行特殊情况的判断,当属性是zIndex,opacity,不能加单位
           if(i == "zIndex"){
               //层级问题不能用缓动动画做,否则会一闪一闪的
               ele.style[i] = json[i];
           } else if(i == "opacity"){
               ele.style[i] = leader/100;
               ele.style.filter = "alpha(opacity="+leader+")";
           } else{
               ele.style[i] = leader+"px";
           }
           //判断属性是否到位(不考虑有小数的情况)
           if(json[i] !== leader){
               bool = false;
           }
        }
        if(bool){
            clearInterval(ele.timer);
            if(fn){
                fn();
            }
        }
    },20);
}
6. 定义一个move()方法,使对应的li运动到指定的位置

刚开始,所有的li都放置在box盒子内的同一个位置。
当加载页面时,就执行一次move()方法,使得每个li运动到相对应的位置。

在说明move()方法之前,需要介绍一些数组的方法 :


1. pop() 删除最后面的元素

2. push() 在最后面添加元素

3. shift() 删除最前面的元素

4. unshift() 在最前面添加元素


思路:

    1. 点击左箭头时,将jsonArr数组中的最后一个元素,放在数组的最开头的位置。

在这里使用pop()方法,取出最后一个元素,再用push()方法将该元素添加到最开头的位置

    2. 点击右箭头时,将jsonArr数组中的第一个元素,放在数组的最末尾的位置

在这里使用shift()方法,取出第一个元素,再用unshift()方法将该元素添加到最末尾的位置

     3. 具体实现代码如下:

//封装一个move方法,完善旋转轮播图
    //当bool为true时,为点击右箭头,否则就为左箭头
    function move(bool) {
        //在执行第一次move时,并不需要传递bool值
        // 所以当bool不是undefined时,再进行判断即可
        if(bool !== undefined){
            if(bool){
                var first = jsonArr.shift();
                jsonArr.push(first);
            }else {
                var last = jsonArr.pop();
                jsonArr.unshift(last);
            }
        }
        for(var i=0;ifunction () {
                flag = true;
            });
        }
    }
# 7. 最后,为左右箭头绑定点击事件,使li之间运动起来即可
//点击左侧按钮,图片逆时针旋转,jsonArr最后一个元素放在最开头
left.onclick = function () {
   if(flag){
       //一发生点击事件,就让flag为false
       // 当animate方法执行完毕,执行了回调函数,下一次点击才会有效,这样可以避免恶意点击
      flag = false;
      move(false);
  }
}

//点击右侧按钮,图片顺时针旋转,jsonArr第一个元素放在最末尾
right.onclick = function () {
   if(flag){
       flag = false;
       move(true);
   }
}

你可能感兴趣的:(JS,旋转木马,轮播图,特效案例)