基于swiper的新闻滚动组合

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

 20739  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);
       }
   }
});
相关插件-幻灯片和轮播图

可拖动的轮播插件(视频存在进度条,swiper插件)

可以拖拽实现切换图片,可以将图片和视频一起实现滑动。视频存在进度条,进度条完毕,实现切换
  幻灯片和轮播图
 46888  379

强大的照片浏览工具

view.js viewer是一款功能强大的图片查看器jQuery插件
  幻灯片和轮播图
 39982  433

jquery实现图片浏览类似qq空间图片查看

利用layer.min.js插件进行实现
  幻灯片和轮播图
 39898  351

jQuery图片切换插件Slides

Slides是一个jQuery插件用于将一组图片组织成一个好看的幻灯片展示控件。支持:循环、自动播放、淡入/淡出幻灯片切换效果,交叉淡入淡出,图片预加载,自动产生分页。
  幻灯片和轮播图
 57145  389

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

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