Swiper轮播图

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

 26435  192  查看评论 (9)
分享到微信朋友圈
X
Swiper轮播图 ie兼容10

更新时间:2020-06-15 00:19:47

更新说明:我把autoplay属性合起来了,切换时间属性是因为 之前写了两个autoplay 后面的把前面的覆盖了,所以没有效果我已经把两个合在一起了,这样子就不会出现失效的错误了


更新时间:2020-05-05 22:03:41

使用方法

导入swiper js和css

<link rel="stylesheet" type="text/css" href="./css/swiper.css"/>
<script src="./js/swiper.js" type="text/javascript" charset="utf-8"></script>

以第一个轮播为列:

水平切换

<div class="swiper-container" id="case1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/t1.png"></div>
        <div class="swiper-slide"><img src="img/t2.png"></div>
        <div class="swiper-slide"><img src="img/t4.png"></div>
    </div>
    <!-- 导航按钮 上一页下一页 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

js内容:

var mySwiper = new Swiper('#case1', {
    autoplay: true, //可选选项,自动滑动
    initialSlide: 1, //默认显示第二张图片索引从0开始
    speed: 2000, //设置过度时间
    /* grabCursor: true,//鼠标样式根据浏览器不同而定 */
    autoplay: {
        delay: 3000
    },
    /*  设置每隔3000毫秒切换 */
    <!-- 分页器 -->
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    <!-- 导航按钮 上一页下一页 -->
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    <!-- 滚动条 -->
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
    },
    /*  设置当鼠标移入图片时是否停止轮播*/
    autoplay: {
        disableOnInteraction: false,
    },
});

css内容:设置了一下宽高,居中显示

p{text-align: center;}
    img{ width: 43.75rem;
    height: 18.125rem;
}
.swiper-container{
    width: 43.75rem;
    height: 18.125rem;
    margin:0 auto;
}
相关插件-幻灯片和轮播图

html5全屏大图幻灯片切换特效按钮特效

html5全屏大图幻灯片切换特效按钮特效
  幻灯片和轮播图
 39922  372

jquery焦点图轮播插件excoloSlider

jquery焦点图轮播插件excoloSlider,支持拖拽
  幻灯片和轮播图
 35340  319

js简单的banner图片切换焦点图代码

js简单的banner图片切换焦点图代码
  幻灯片和轮播图
 38193  350

强大的照片浏览工具

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

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

    风格法 0
    2020/6/17 10:46:05
    确定可以兼容ie9???????????? 回复
    silence 1
    2020/6/12 12:08:04
    我知道问题在哪里了!
    index.html里面的delay:3000,是不可用的。要调整速度必须去js文件里面,把delay:3e3改成想要的速度。
    科学计数法 3e3=3*10的3次方 3e3=3000 2e3=2000 2.4e4=24000 回复
    silence 0
    2020/6/12 11:49:54
    老哥,过度时长有用,但是多久翻页那个失效了,更改不会有变化。
        长安0
        2020/6/12 21:03:20
        我发现了
        长安0
        2020/6/12 21:06:17
        不是改不了,不用去js改js文件里的那个是默认值,这边是因为我写了两个autoplay属性,后面有个把前面的覆盖了,所以没有产生效果,我已经改过来了,用的时候后面几个轮播属性也看看吖,我每个轮播图都稍微更改了两个属性,这个是看文档写的,也可以去看文档写:https://www.swiper.com.cn/
    回复
    云云云 0
    2020/5/9 21:55:48
    老哥你这个对象怎么传了3个autoplay,鼠标移入时暂停没效果,设置切换时长也没效果
        长安1
        2020/5/10 7:58:15
        三个autoplay是因为我写属性的时候没合起来见谅????,鼠标移进停止轮播swiper没有内置,可以用js自己写一个,更改速度是有的,一个是过度时间,一个是每隔多久轮播时间你可以试试改错没有。
    回复
    长安 0
    2020/5/6 14:14:08
    为了避免浏览器缩放而导致轮播图出现变形,可以将img的宽度设置为100% 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复