仿天猫、京东、麦包包等,无缝循环轮播图的开发(jQuery)

我之前写过一个常见的轮播图效果,详情见:http://www.jianshu.com/p/44ab9edd8c57
本文内容实现的是无缝循环轮播图效果,也比较常见,天猫、京东、麦包包中也经常会有。图片自动滑动,且点击下面文字(指示器)进行图片的切换。
如果想让动画效果更有趣,可引入jquery.easing包,里面有很多贝塞尔曲线特效,结合animate里使用,效果会更加炫酷!

实现效果:

无缝轮播图.gif

实现原理:

仿天猫、京东、麦包包等,无缝循环轮播图的开发(jQuery)_第1张图片
image.png

实现难点:
1、解决点击事件与轮播动画的问题(注:点击时候不轮播,轮播动画时不可点击)
2、解决指示器显示异常问题
3、解决动画叠加问题

代码(文中5张图片大小均为:952x440,最后第6张与第一张相同):



    
        
        
        
        
        
    
    
    
    
        
![](mbb_images/img1.jpg) ![](mbb_images/img2.jpg) ![](mbb_images/img3.jpg) ![](mbb_images/img4.jpg) ![](mbb_images/img5.jpg) ![](mbb_images/img1.jpg)
  • 起舞少女
  • 小小心机
  • 海岛假日
  • 星空幻想
  • 马戏游园

下载:https://github.com/wangwei66666/SeamlessSlideshow/tree/master
如有问题欢迎交流。

如转载请注明出处,谢谢!

你可能感兴趣的:(仿天猫、京东、麦包包等,无缝循环轮播图的开发(jQuery))