我是用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代码触发事件改变图片的位置会导致图片位置混乱，因为会修改了图片的初始位置，动画就乱掉了。
请教 按照我这个思路，应该如何实现切换至对应图片位置？
48
收起
正在回答
6回答
你是想实现图片左右滑动轮播的效果吗？建议这么实现：定义一个全局变量index，在定时器中每隔一定的时间改变它的值，然后让box的left值向左移动index*（每张图片的宽度）。鼠标移入原点的时候，获取到该原点的索引值，赋值给index，然后让box的left改变为：index*（每张图片的宽度）。
其实和案例中的思路是一样的，都是通过控制关键索引值来实现的，只是案例是图片display:block和none，你想要的效果是改变包含着图片的大盒子left值。
嘘_别说话
2018-01-08 15:29:33
https://www.jianshu.com/p/5c7c427eb557
你可以看看这个里面介绍的轮播，应该就是跟你的一样，通过元素的left值来实现图片的切换。
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星