原生js实现的轮播图插件

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

 17953  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、想改动的解压缩两个文件自己改吧,都是很简单的知识

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

vue.js轮播图(原创)

vue的轮播小插件,vue初学者可以借鉴,代码量很少。
  幻灯片和轮播图
 53420  416

游戏网站轮播焦点图插件

仿flash下滑切换js焦点图
  幻灯片和轮播图
 28114  368

jQuery 3D旋转轮播jquery.roundabout.js

3D轮播图,每张图都有标题,并且可以附加链接,点击最上层的图片可跳转对应的链接
  幻灯片和轮播图
 60484  472

jQuery仿腾讯图片新闻组图幻灯

jQuery仿腾讯图片新闻组图幻灯
  幻灯片和轮播图
 33944  409

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

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