我是用css的动画来实现左右切换图片的。但是按照这个思路后边有点没思路了，请教

.box{
    position: absolute;
    z-index: 3;
    width: 4560px;/*超出.banner的部分隐藏*/
    height: 700px;
    transform: translate(0, 0);
    left: 0px;
    animation-name: box1;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@-webkit-keyframes box1{
    0%{transform: translate(0, 0);}
    20%{transform: translate(0, 0);}
    25%{transform: translate(-1520px, 0);}
    45%{transform: translate(-1520px, 0);}
    50%{transform: translate(-3040px, 0);}
    70%{transform: translate(-3040px, 0);}
    75%{transform: translate(0, 0);}
    100%{transform: translate(0, 0);}
}
.c1{
    width: 1520px;
    height: 700px;
    float: left;
    z-index: 3;
    float: left;/*为了使图片轮播实现从右向左的切换，就得是在同一行存放图片*/
    left: 0px;
}
.c2{
    width: 1520px;
    height: 700px;
    float: left;
    z-index: 3;
    float: left;/*为了使图片轮播实现从右向左的切换，就得是在同一行存放图片*/
    left: 1520px;
}
.c3{
    width: 1520px;
    height: 700px;
    float: left;
    z-index: 3;
    float: left;/*为了使图片轮播实现从右向左的切换，就得是在同一行存放图片*/
    left: 3040px;
}
.dots{
    position: absolute;
    right: 20px;
    bottom: 10px;
    text-align: right;
    z-index: 6;
}
.dots>span{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    line-height: 10px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) ;/*CSS3新增的阴影属性*/
}
.dots>span.active{
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    background: #fff;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<section class="main" id="main">
<div class="banner">
<div class="box" id="box">
<img class="c1" src="img/1.jpg">
<img class="c2" src="img/2.jpg">
<img class="c3" src="img/3.jpg">
</div>
<div class="dots" id="dots"> 
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

如代码

//封装一个代替getElementById()的方法
function byId(id){
    return typeof(id) === "string"?document.getElementById(id):id;
}
 
//声明全局变量
//就不用传参了
var a1 = byId("box").getElementsByTagName("div");//取到ID为box的div标签
 
//封装一个更改动画状态的函数
function mouseStop(){
    var a2 = byId("box");
    a2.onmouseover = function(){//鼠标划过暂停
        a2.style.animationPlayState="paused";
    }
    a2.onmouseout = function(){//鼠标离开继续
        a2.style.animationPlayState="running";
    }
}
 
//封装一个鼠标移过圆点时触发切换到对应图片的效果方法
function circleChange(){
    //绑定事件前先把要绑定的对象取出来并声明
    var box = byId("box");//取到ID为Box的div
    var dots = byId("dots").getElementsByTagName("span");
    console.log(dots[0]);
 
    dots[0].onmouseover = function(){
         //box.style.transform="translate(-1520px,0)";.
         box.style.left = "-1520px";
    }
}
 
circleChange();
mouseStop();

按照我写的，是通过css控制关键帧来实现的图片自动切换效果，类似于胶片式。

但是在实现划过圆点切换至对应图片那里没思路了，如果按照上述js代码触发事件改变图片的位置会导致图片位置混乱，因为会修改了图片的初始位置，动画就乱掉了。

请教按照我这个思路，应该如何实现切换至对应图片位置？

慕丝8115018 2018-01-08

源自：项目：JavaScript实现轮播特效 3-3 轮播图之定时器设置

收起

6回答

怎么都被占用了呢回答被采纳获得+3积分 2018-01-08 15:46:20

你是想实现图片左右滑动轮播的效果吗？建议这么实现：定义一个全局变量index，在定时器中每隔一定的时间改变它的值，然后让box的left值向左移动index*（每张图片的宽度）。鼠标移入原点的时候，获取到该原点的索引值，赋值给index，然后让box的left改变为：index*（每张图片的宽度）。

其实和案例中的思路是一样的，都是通过控制关键索引值来实现的，只是案例是图片display:block和none，你想要的效果是改变包含着图片的大盒子left值。

收起回答

慕丝8115018 提问者 #1

非常感谢！还有个小问题，js现在可以实现触发事件跳转到keyframes关键帧吗？比如实际上动画已经进行到50%，我触发事件，想要跳转到20%的关键帧位置，然后动画就从20%的地方继续进行

2018-01-08 16:47:35
慕丝8115018 提问者 #2

按照你给的思路的话，平移速度怎么设置呢？如果只是改变left的值，在浏览器中一瞬间就好了，效果和显示隐藏一样，没有想要的平移过去有一个短短的视觉效果

2018-01-08 18:06:40
慕丝8115018 提问者 #3

非常感谢！

2018-01-09 08:44:31

怎么都被占用了呢 2018-01-09 09:53:47

学习了jQuery之后，利用jQuery提供的animate方法改变元素的left，就可以方便制作你说的那种“视觉”效果了。

收起回答

嘘_别说话 2018-01-08 17:38:50

基本上没有用js控制动画关键帧这么写的，太麻烦了。要么使用纯css写，要么用纯脚本写。不建议使用css，性能不好。使用脚本写：一是可以用助教老师的方式，二就是用提供的链接里面的添加节点的方式。

收起回答

纯情掉了一地 2018-01-08 16:56:08

每次我进入到这种旋涡的时候，就告诉自己，我这是在浪费时间，还不如去打游戏。。。游戏一局下来一个小时多。。这种问题纠结起来，没玩没了

收起回答

嘘_别说话 2018-01-08 15:29:33

https://www.jianshu.com/p/5c7c427eb557

你可以看看这个里面介绍的轮播，应该就是跟你的一样，通过元素的left值来实现图片的切换。

收起回答

纯情掉了一地 2018-01-08 13:53:33

用JS动态改变keframes值？

收起回答

提问者慕丝8115018 #1

容易造成动画混乱吧，如果挨个设置一遍的话对于效果过渡期等过多的动画代码会翻好几倍吧。现在倒是可以通过动态修改动画名载入，通过触发事件载入不同的动画以达到效果，但是如果说想用类似于索引方式呢？不能循环遍历的代码总感觉效率太差。

2018-01-08 14:51:59
纯情掉了一地回复提问者慕丝8115018 #2

我开始和你有同样的困惑，希望通过所学的知识完成想要的效果。。。。我建议你暂时跳过并且记录那些伤脑筋和消耗大量时间的技术问题，然后学习之后的课程。。然后你会发现，所学的技术越多，之前的问题越容易解决，能够实现效果就好了。。实际上那并不是一个思考的过程，仅仅是在做记忆检索，那会给人一种假象，让人有一种，我在努力思考，在解决问题的假象。。然后在这种假象中浪费掉大量时间。。。。。。这是我自己感觉到的经验，不知道对你有没有价值。每次用这个class叫做 inner-textarea的 textarea我都要打开控制台吧当前正在使用的这个框的禁用扩大去掉...........

2018-01-08 16:54:22