小羊也疯狂 2017-04-09 14:19 采纳率: 100%
浏览 2731
已采纳

关于用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>
  • 写回答

3条回答 默认 最新

  • 宁00 2017-04-10 02:18
    关注

    我觉得图片只需要重复一张就可以实现无缝轮播

    <div id="slideBox" style="left: 0;">
            <img src="1.jpg" alt="1">
            <img src="2.jpg" alt="2">
            <img src="3.jpg" alt="3">
            <img src="4.jpg" alt="4">
            <img src="1.jpg" alt="1">
        </div>
    
     window.onload=function () {
                next.onclick=function () {
                    if(slideBox.style.left=="-3000px"){
                      setTimeout(function() {
                        slideBox.style.transition="left 0s linear";
                        slideBox.style.left="0";
                      }, 1000);
                    }
                    slideBox.style.transition="left 1s linear";
                    slideBox.style.left = parseInt(slideBox.style.left)-1000+"px";
    
                };
            }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题