最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

支持移动端的纯js轮播图插件awesome-slider

来源:http://www.erdangjiade.com/js/8755.html 沐浴春风 2019-06-25 22:03浏览(304)

awesome-slider是一款支持移动端的纯js轮播图插件。该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

支持移动端的纯js轮播图插件awesome-slider
分类:图片代码 > 图片轮播 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 20 积分

基本使用

const AwesomeSlider = require("awesome-slider");
// or
import AwesomeSlider from "awesome-slider";
 
const awesomeSlider = new AwesomeSlider(images, container, [options]);

API images:轮播图的图片。可以是简单模式,也可以是也可以自由组合模式。

/* 简单模式 */
["./images/1.jpg", "./images/2.jpg", "./images/3.jpg", "./images/4.jpg"];
 
/* 自由组合模式 */
[
  {
    tagName: "a",
    attrs: {
      style: "",
      class: "",
      href: "https://wwww.example.com"
    },
    children: [
    "this just textNote, not object",
    {
      tagName: "div",
      attrs: {
      style:""
    },
  },
  "./images/example.jpg"
]

container:包裹 images 的 html 元素。

var container1 = document.querySelector(".container"); 
// react
...
const containerRef = useRef(null);
...
const container1 = containerRef.current;
...
<div className="container1" ref={containerRef}>

配置参数

ratio:图片的宽高比。
    duration:轮播动画过渡的时长(ms)。
    autoplay:是否开启自动轮播。
    interval:自动轮播的间隔时长(ms)。
    indicator:轮播状态的指示 js创建html, 通过有传递的参数做样式交互, 如果要使用this, 就不要使用箭头函数, 一般现有传递的参数够用。
    initIndex:初始展示的图片的序号。
    manual:js创建html, 插入两部分, 分别是previous和next。
    timing:轮播动画类型。
    enableResize:是否开启窗口大小变化的监听。
    imageDownloading:js创建html, 插入图片加载的效果。
    imagePlaceholder:js创建html, 插入图片加载失败的占位。
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/8755.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    02-06 16:20
    zy_wjh
    真的是太方便了,好用,赞赞赞。
1 2