基于swiper的新闻滚动组合

所属分类:媒体-幻灯片和轮播图

 18470  225  查看评论 (1)
分享到微信朋友圈
X
基于swiper的新闻滚动组合 ie兼容10

更新时间:2020-07-15 10:26:42

swiper引入:

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>

swiper调用(例1为例):

var swiper = new Swiper('#newsList1', {
   effect : 'fade',
   fadeEffect: {
       crossFade: true,
   },
   direction : 'horizontal',
   loop: true,
   autoplay : {
       delay:5000,//滚动速度
       disableOnInteraction: false,
   },
   pagination: {
       el: '.adSN_page',
       clickable :true,
   },
   on:{
       init:function(){
           var total=this.slides.length-2;
           $('.swiper-num .total').text('0'+total);
           this.emit('transitionEnd');
       },
       transitionEnd:function(){
           var index=this.realIndex+1;
           $(".swiper-num .active").text("0"+index);
       }
   }
});
相关插件-幻灯片和轮播图

jQuery图片轮播插件带缩略图,响应式触屏滑动

jQuery图片轮播插件制作带缩略图的响应式图片轮播,支持手机,移动端触屏滑动图片切换效果
  幻灯片和轮播图
 20474  247

jquery分层轮播插件jquery.zySlide

jquery实现分层轮播3d旋转效果
  幻灯片和轮播图
 49751  429

完美左右切换

完美左右切换代码简单容易修改。
  幻灯片和轮播图
 45187  460

jQuery简单的轮播图

用最简单的最少量的代码完成轮播任务,无缝,无限循环,自适应窗口大小
  幻灯片和轮播图
 49527  363

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Ruins. 0
    2024/8/1 14:52:16
    用在vue中,分页部分的div点和线样式没有,不显示,初始化时定义了也不显示,不知道什么问题 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复