原生js实现的轮播图插件

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

 18014  189  查看评论 (1)
分享到微信朋友圈
X
原生js实现的轮播图插件 ie兼容8

更新时间:2019-12-01 22:35:48

使用方法

1、在页面引入picture-carousel.min.css和picture-carousel.min.js

<link rel="stylesheet" href="picture-carousel.min.css" />
<script type="text/javascript" src="picture-carousel.min.js"></script>

2、在页面新建一个div,设置宽度高度

<div id="box"></div>

3、调用生成图片轮播容器

var box = new PictureCarousel('#box', {
    direction: 'left', //轮播方向:left,right
    interval: 4000, //单位ms,轮播持续时间
    duration: 50, //单位ms,自动切换时间间隔,最佳速度:容器宽度/duration = 25
    autoplay: true, //是否自动播放
    display: 1, //同时显示的滑块数量
    arrow: true, //是否显示左右箭头
    dots: true, //是否显示指示点
    listData: [ //插入图片等的数据
        {
            src: 't1.png',
            alt: '1'
        },
        {
            src: 't2.png',
            alt: '2'
        },
        {
            src: 't3.png',
            alt: '3'
        },
        {
            src: 't4.png',
            alt: '4'
        }
    ]
});
box.init();

4、注意

duration: 这个时间的设置很重要,一般是---容器(如#box所代表的容器)的宽度 / duration = 20左右,商最好保证余数为0。

 所以你可以这样求值 duration(整数)=容器宽度/20(或上下)。

5、想改动的解压缩两个文件自己改吧,都是很简单的知识

相关插件-幻灯片和轮播图

HTML5全屏动画幻灯片切换

超炫酷HTML5响应式全屏幻灯片切换
  幻灯片和轮播图
 30145  411

jQuery适合移动设备触摸屏的响应式幻灯片插件

jQuery适合移动设备触摸屏的响应式幻灯片插件
  幻灯片和轮播图
 38919  465

jQuery径向SVG滑块轮播

简单反应迅速的滑块,与采用 SVG clipPath 和遮罩元素径向过渡效果。
  幻灯片和轮播图
 29580  398

支持手机触摸滑动图片轮播

支持手机触摸滑动图片幻灯片轮播切换代码
  幻灯片和轮播图
 82411  929

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

    李丹妮ing 0
    2020/4/9 13:27:58
    请问一个页面用2次报错是为啥呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复