素材牛VIP会员

原生JS无限循环响应式轮播图效果

 所属分类:网页特效-焦点图/幻灯片

 浏览:1514次  评论:3次  更新时间:2018-12-14
牛币素材VIP可免积分下载
原生JS无限循环响应式轮播图效果兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:一个简单的原生JS轮播图,响应式的,动画效果靠的是transfm。

详细介绍

使用方法

head里面加入这些文件调用js和css,路径根据实际情况自行修改

<link rel="stylesheet" href="css/style.css" />
<script src="js/slide.js"></script>

html

<div id="slide" >
    <ul>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
    </ul>
    <div>
        <span > < </span>
        <span > > </span>
    </div>
</div>

这里是html部分的格式理论上放多个图都行,放多了记得去修改一下UL的起始百分比宽度预设是1000%,左右导航如果不喜欢可以改css或者直接换成图片。

导入之后运行函数加容器ID的为参数就可以调用了

slideLlx("slide");//参数为字符串是外层容器的id,可以多次调用

css样式部分注意不要有命名冲突

文件目录结构

  • css
    • ┝ style.css
  • img
    • ┝ 1.png
    • ┝ 2.png
    • ┝ 3.png
    • ┝ 4.png
  • ┝ index.html
  • js
    • ┝ slide.js

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

ll***17  
2018年12月19日

不错啊!

回复
xi***mo  
2019年01月05日

学习下!

回复
qq***70  
2019年08月22日

好东西

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)