如何在Web端实现动画切换效果一致的无限循环图片轮播？
具体问题是这样的，我想要一个能无限循环播放图片的轮播， 重点是播放完一轮后，跳回第一张时，切换效果应该和之前一样。即如果动画是从左到右切换的，那么最后一张切换到第一张时，也应该是这个效果。
在网上找了很多 jQuery 的轮播插件，但都不能满足我所想要的效果。Bootstrap 的 Carousel 倒是能用，但源码看不懂。
HTML 代码大致如下：
<div class="carousel">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
CSS 关键代码：
.carousel {
height: 120px;
overflow: hidden;
}
.slide {
height: 120px;
transition: all .4s ease-in;
}
jQuery关键代码：
$('.slide').each(function(){
$(this).css('transform', 'translateY(' + (i)*-100 + '%)');
})
我所写的这个，最后一张是
transform: translateY(-300%);
，然后就变成了
transform: translateY(0%);
,所以动画的方向变反了。
这样的写法似乎无法解决这个问题，是否有其他的轮播图写法？
我叫呵呵.
10 years, 2 months ago
Answers
我觉得 没必要闭门造车。可以看看这个
superslide
一个我用了很多年的插件
源码也比较简单，可以看得懂 。
扮猪吃老虎
answered 10 years, 2 months ago
最爱阿露库埃德
answered 10 years, 2 months ago
实现无缝切换可以多加两张图，在第一张前面加上最后一张图，在最后一张图后面加上第一张图。刚好之前写过一个，JS原生，具体代码如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.wrap{
width: 900px;
height: 500px;
overflow: hidden;
margin: 0 auto;
margin-top: 50px;
position: relative;
}
.list{
position: absolute;
width: 5400px;
}
img{
width: 900px;
height: 500px;
float: left;
}
a{
text-decoration: none;
position: absolute;
top:200px;
display: inline-block;
width: 85px;
line-height: 70px;
background: rgba(3,3,3,.3);
color: #fff;
font-weight: 700;
font-size: 50px;
text-align: center;
display: none;
}
.buttons{
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
span{
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
cursor: pointer;
border: 1px solid #fff;
}
span~span{
margin-left: 20px;
}
.light{
background-color: #fff;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="list" id="list" style="left: -900px;">
<img src="img/p4.jpg">
<img src="img/p1.jpg">
<img src="img/p2.jpg">
<img src="img/p3.jpg">
<img src="img/p4.jpg">
<img src="img/p1.jpg">
</div>
<a href="#" id="prev"> < </a>
<a href="#" id="next" style="right:0"> > </a>
<div class="buttons" id="buttons">
<span index="1" class="light"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
js
window.onload = function () {
var index = 1;
var switching = false;
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var list = document.getElementById('list');
var wrap = document.getElementById('wrap');
var dots = document.getElementsByTagName('span');
var buttons = document.getElementById('buttons');
wrap.onmouseover = function () {
prev.style.display = 'block';
next.style.display = 'block';
stop();
};
wrap.onmouseout = function () {
prev.style.display = 'none';
next.style.display = 'none';
play();
}
function lastImg() {
if (switching) {
return;
}
switchPic(900);
index--;
if (index < 1) {
index = 4;
}
else if(index > 4) {
index = 1;
}
lightDot();
}
function nextImg() {
if (switching) {
return;
}
switchPic(-900);
index++;
if (index < 1) {
index = 4;
}
else if(index > 4) {
index = 1;
}
lightDot();
}
function btn(e) {
if (switching) {
return;
}
e = window.e || e;
var target = e.target ? e.target: e.srcElement;
if (target.nodeName.toLowerCase() == 'span') {
var index1 = target.getAttribute('index');
var offset = (index - index1) * 900;
switchPic(offset);
index = index1;
lightDot();
}
};
// 切换图片的函数
function switchPic(offset) {
switching = true;
var time = 300;
var inter = 10; // 隔10ms切换一次
var speed = Math.ceil(offset/(time/inter));
var left = parseInt(list.style.left) + offset;
var go = function () {
var curLeft = parseInt(list.style.left);
if ((speed > 0 && curLeft < left) || (speed < 0 && curLeft > left)) {
list.style.left = curLeft + speed + 'px';
setTimeout(go, inter);
}
else {
list.style.left = left + 'px';
if (left < -3600) {
list.style.left = -900 + 'px';
}
else if (left > -900) {
list.style.left = -3600 + 'px';
}
switching = false;
}
};
go();
}
// 点亮小点
function lightDot() {
for (var i = 0, len = dots.length; i < len; i++) {
if (dots[i].className == 'light') {
dots[i].className = '';
break;
}
}
dots[index-1].className = 'light';
}
// 自动轮播
var timer;
var order;
var interval;
var play = function () {
var interval1 = interval || 2000;
if (order == 'prev') {
timer = setInterval(lastImg, interval1);
}
else {
timer = setInterval(nextImg, interval1);
}
};
var stop = function () {
clearInterval(timer);
};
// 事件绑定DOM2
function addEvent(element, event, listener) {
if (element.addEventListener) {
element.addEventListener(event, listener, false);
}
else {
element.attachEvent('on'+event, listener);
}
}
// 点击左右键切图
addEvent(prev, 'click', lastImg);
addEvent(next, 'click', nextImg);
// 点击小点切图
addEvent(buttons, 'click', btn);
// 指定切换顺序和间隔时间
order = 'next';
interval = 2000;
play();
};
可以建个img文件夹，放几张图片试一下效果，这个是4张图片
脆皮豆腐00
answered 10 years, 2 months ago
原始html：
<ul>
<li class="slide1">1</div>
<li class="slide2">2</div>
<li class="slide3">3</div>
<ul>
先clone slide1 和 slide3，然后变成这样：
<div class="carousel">
<ul>
<li class="slide3">3</div>
<li class="slide1">1</div>
<li class="slide2">2</div>
<li class="slide3">3</div>
<li class="slide1">1</div>
<ul>
</div>
当动ul翻到最后clone出的slide1后，直接让ul定位到原始的slide1（这个动作不要加动画效果，直接定位），反方向也是如此。
移动端就不是这么做了。每个slide都加absoulte,transition属性，然后监听手势去控制当前触摸的slide和其前后slide的transform。
Suika先生
answered 10 years, 2 months ago
