jQuery实现的仿Laysns轮播图特效

 所属分类:焦点图/幻灯片

 浏览:437次-  下载:0次-  评论: 0次-  更新时间:2021-09-24

jQuery实现的仿Laysns轮播图特效

使用方法:

div中的Id要与应用使用中统一

html

<div id="slider"></div>

css引入

<link rel="stylesheet" href="./index.css ">

js引入

<script src="./jquery.slider.js"></script>

js代码

<script>
    $("#slider").sliderImg({
        imgs: ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", "./img/5.jpg"],
    });

</script>

默认配置项

this.options = {
    container: "slider", // 轮播容器
    imgs: [],
    duration: "normal", // 轮播时长
    delay: 2000, // 延迟
    direction: "left", // 自动轮播方向
    auto: true, // 是否自动轮播
    arrows: true, // 是否显示左右箭头
    width: 520, // 宽
    height: 300 // 高
}


金币说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值金币充值会员更多说明»
描述:基于jQuery实现轮播图,代码简单调用方便

文件目录结构

  • ┝ jquery.min.js
  • ┝ 站长素材网.url
  • ┝ jquery.slider.js
  • ┝ index.css
  • img
      • ┝ 1.jpg
      • ┝ 4.jpg
      • ┝ 2.jpg
      • ┝ 3.jpg
      • ┝ 5.jpg
  • ┝ www.zzsucai.com.txt
  • ┝ index.html

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!
我的金币余额: 0 已下载次数: 0
所需金币:12开始下载

金币获取:签到、评论、投搞、充值、发帖、回帖    » 在线充值(10金币=1元)