具体问题是这样的,我想要一个能无限循环播放图片的轮播,重点是播放完一轮后,跳回第一张时,切换效果应该和之前一样。即如果动画是从左到右切换的,那么最后一张切换到第一张时,也应该是这个效果。
在网上找了很多 jQuery 的轮播插件,但都不能满足我所想要的效果。Bootstrap 的 Carousel 倒是能用,但源码看不懂。
HTML 代码大致如下:
<p class="carousel">
<p class="slide"></p>
<p class="slide"></p>
<p class="slide"></p>
<p class="slide"></p>
</p>
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%);
,所以动画的方向变反了。
这样的写法似乎无法解决这个问题,是否有其他的轮播图写法?
JQERY의 범용 JS를 사용하여 변경하는 것이 좋습니다. 캐러셀을 사용하려면 CSS도 완료해야 합니다. 그리고 .SLIDE에 PIC가 하나만 있으면 엉망이 됩니다. CSS를 추가하려면 PIC를 분리하세요. 모든 클라우드를 추가하지는 마세요. PIC는 각 이미지에 대해 하나의 CSS 하위 스타일을 사용합니다.
这个思路是:
这样就可以让轮播始终都是一个图片的距离,无论你点击哪个序号(1,2,3,4,5),比如,从当前是第一张轮播,你直接跳到第五张图片,普通轮播会产生4个图片的距离,但是这样始终是一个图片的距离。
其他在尾部克隆插入的方法没法解决以上产生的距离问题。
参考我写的组件:https://github.com/xiaomingming/easySwitch。
demo是
easySwitch.html
.三个class,都加absoulte,transition
左:transformX(-100%)
中:transformX(0)
右:tranformX(100%)
每次把当前显示的加为中间的class 小于当前的加左边class,大于的放右边,当最后一个激活的时候,把第一个放右边。只要每次改当前索引值就可以了,动画交给tansition去
原始html:
先clone slide1 和 slide3,然后变成这样:
当动ul翻到最后clone出的slide1后,直接让ul定位到原始的slide1(这个动作不要加动画效果,直接定位),反方向也是如此。
移动端就不是这么做了。每个slide都加absoulte,transition属性,然后监听手势去控制当前触摸的slide和其前后slide的transform。
这个思路说白了其实很简单,比如你要轮播三张图,你可以写四个标签,第一张图和第四张图是一样的,当播完第四张的时候将标签改为第一张的标签。。。手机码字不方便,大概就这个意思,达到欺骗用户眼睛的目的,大部分轮播插件也是这么实现的
给个思路,第一个内容
position: relative
。然后轮播到最后一个内容的时候,第一个内容添加left
值,大小为滚滚容器的宽度减一块内容的宽度。然后接着轮播,就看到了我们相对定位的第一个内容后。把第一个内容的position: static
。然后滚动的容器left: 0
就做到无缝了。思路大概是这样了!
有个视频可以做参考:华为轮播图
我觉得 没必要闭门造车。可以看看这个 superslide 一个我用了很多年的插件
源码也比较简单,可以看得懂 。
考虑一下使用Canvas自己画~~?
我觉得用Canvas画反而比较简单方便。而且性能还能好点……
如果要实现这种无缝滚动,需要你补齐你的p.slider。实现这样效果的插件很多,比如楼上说的superslider,还有cxScroll等,如果楼主想看具体的细节,花点时间去研究下这些插件的源码即可,原理很简单。
我想你要的是:当最后一张图片时就轮播到第一张是吗? 无限轮播是吧?..
这个容易只要一个公式就搞定了.
var prevImg = (currentImg+1)%totalImg; //currentImg是当前的轮播图片,toutalImg是一共多少图片.
这样就能无限了