20

关于用transition以及left实现轮播图的问题

原理就是不断改变left 用n+2张图首尾重置left实现动画的连贯,慕课网上用的纯js
我课后用css3的transition 发现首尾会反向
我本来想的是在重置过程中先关闭transition 重置了left后再打开transition并继续移动
但是 这个transition属性非常坑,貌似只看onclick函数的首尾left状态 以及尾部
transition的设置,**_中间的left和transition设置完全无效_**。那么这种轮播图方法(用css3做动画)下。首尾反向问题还有办法解决吗?
图片说明

源码:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideshow</title>
    <style>
        .container{
            position: relative;
            overflow: hidden;
            height: 567px;
            margin: 50px auto;
            width: 1000px;
            border: 5px solid #333;

        }
        #slideBox{height: 567px;
                width: 6000px;
                position: absolute;
                z-index: 1;
                transition: left 1s linear;

        }
        #buttons .on {background-color:orangered }
        #buttons { position: absolute; height: 15px; width: 150px; z-index: 2; bottom: 20px; left: 435px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 15px; height: 15px; border-radius: 50%; background: #333; margin-right: 7px;}
        img{width: 1000px;  height:567px;  float: left;}
        .arrow{width: 60px;height: 60px;position: absolute;font-size:50px ;font-weight: bolder; line-height: 50px;top:250px;z-index:2; text-align: center;color: #fff;background-color: RGBA(0,0,0,0.3); display: none;
            cursor: pointer;  }
        .arrow:hover{
            background-color: RGBA(0,0,0,0.7);
        }
        .container:hover     .arrow {display: block;}
        #prev{
            left: 10px ;

        }
        #next{
            right: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="slideBox" style="left: -1000px;">
        <img src="images/4.jpg" alt="4">
        <img src="images/1.jpg" alt="1">
        <img src="images/2.jpg" alt="2">
        <img src="images/3.jpg" alt="3">
        <img src="images/4.jpg" alt="4">
        <img src="images/1.jpg" alt="1">
    </div>
    <div id="buttons">
        <span class="on"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <a class="arrow" id="prev"><</a>
    <a class="arrow" id="next">></a>
    <script type="text/javascript">
        var next = document.getElementById("next");
        var prev = document.getElementById("prev");
        var buttons = document.getElementById("buttons");
        var slideBox = document.getElementById("slideBox");
        window.onload=function () {
            //原计划到重置到时候先关闭重置完以后在打开 但是失败了。还有别的办法吗?
            next.onclick=function () {
                if(slideBox.style.left=="-5000px"){
                    slideBox.style.transitionDuration="0s";
                    slideBox.style.left="-1000px";
                }
                slideBox.style.transition="left 1s linear";
                slideBox.style.left = parseInt(slideBox.style.left)-1000+"px";
            };




        }
    </script>
</div>
</body>
</html>
查看全部
qflyalltime
小羊也疯狂
2017/04/09 14:19
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

3个回复