孙肖宁

旋转木马轮播图特效
描述:页面动态展示旋转木马的轮播图形式,用户鼠标放在轮播图区域内的时候,显示左右按钮,点击可移动切换图片。当一次切...
扫描右侧二维码阅读全文
26
2018/04

旋转木马轮播图特效

描述:页面动态展示旋转木马的轮播图形式,用户鼠标放在轮播图区域内的时候,显示左右按钮,点击可移动切换图片。当一次切换完成后,才能进行下一次的切换,否则无效。鼠标离开区域后,左右按钮隐藏。
注意:小编用的是图片,在这里就不提供给大家了。包括左右的按钮也是图片。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转木马</title>
</head>
<style>
    ul{
        list-style: none;
    }
    .wrap{
        width:1200px;
        margin:10px 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);
    }
</style>
<script>
    window.onload = function () {
        var arr = [
            {
                width:400,
                top:70,
                left:50,
                opacity:20,
                zIndex:2
            },
            {
                width:600,
                top:120,
                left:0,
                opacity:80,
                zIndex:3
            },
            {
                width:800,
                top:100,
                left:200,
                opacity:100,
                zIndex:4
            },
            {
                width:600,
                top:120,
                left:600,
                opacity:80,
                zIndex:3
            },
            {
                width:400,
                top:70,
                left:750,
                opacity:20,
                zIndex:2
            }
        ];

        //获取元素
        var slide = document.getElementById("slide");
        var liArr = slide.getElementsByTagName("li");
        var arrow = slide.children[1];
        var arrowChildren = arrow.children;
        //设置一个开闭原则变量,点击以后修改这个值。
        var flag = true;

        //鼠标放到轮播图上,两侧的按钮显示,移开隐藏。
        slide.onmouseenter = function () {
            //arrow.style.opacity = 1;
            animate(arrow,{"opacity":100});
        }
        slide.onmouseleave = function () {
            //arrow.style.opacity = 1;
            animate(arrow,{"opacity":0});
        }
        //初始化页面,打开页面的时候,直接动画的方式展现
        move();
        //把两侧按钮绑定事件。(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转)
        arrowChildren[0].onclick = function () {
            if(flag){
                flag = false;
                move(true);
            }
        }
        arrowChildren[1].onclick = function () {
            if(flag){
                flag = false;
                move(false);
            }
        }

        //书写函数。
        function move(bool){
            //判断:如果等于undefined,那么就不执行这两个if语句
            if(bool === true || bool === false){
                if(bool){
                    arr.unshift(arr.pop());
                }else{
                    arr.push(arr.shift());
                }
            }
            //在次为页面上的所有li赋值属性,利用缓动框架
            for(var i=0;i<liArr.length;i++){
                animate(liArr[i],arr[i], function () {
                    flag = true;
                });
            }
        }

    }
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }
        return ele.currentStyle[attr];
    }
    function animate(ele,json,fn){
        //先清定时器
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            //开闭原则
            var bool = true;


            //遍历属性和值,分别单独处理json
            //attr == k(键)    target == json[k](值)
            for(var k in json){

                var leader;
                //判断如果属性为opacity的时候特殊获取值
                if(k === "opacity"){
                    leader = getStyle(ele,k)*100 || 1;
                }else{
                    leader = parseInt(getStyle(ele,k)) || 0;
                }

                //获取步长
                var step = (json[k] - leader)/10;
                //二次加工步长
                step = step>0?Math.ceil(step):Math.floor(step);
                leader = leader + step;
                //赋值
                //特殊情况特殊赋值
                if(k === "opacity"){
                    ele.style[k] = leader/100;
                    //兼容IE678
                    ele.style.filter = "alpha(opacity="+leader+")";
                    //如果是层级,一次行赋值成功,不需要缓动赋值
                }else if(k === "zIndex"){
                    ele.style.zIndex = json[k];
                }else{
                    ele.style[k] = leader + "px";
                }
                //清除定时器
                //判断: 目标值和当前值的差大于步长,就不能跳出循环
                //目标位置和当前位置不相等,就不能清除清除定时器。
                if(json[k] !== leader){
                    bool = false;
                }
            }

            console.log(1);
            //只有所有的属性都到了指定位置,bool值才不会变成false;
            if(bool){
                clearInterval(ele.timer);
                //所有程序执行完毕了,现在可以执行回调函数了
                //只有传递了回调函数,才能执行
                if(fn){
                    fn();
                }
            }
        },25);
    }
</script>
<body>
    <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/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>
            </ul>
            <!--左右切换按钮-->
            <div class="arrow" id="arrow">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>
</body>
</html>
Last modification:April 26th, 2018 at 09:26 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment