JS响应式无限循环轮播图代码

JS响应式无限循环轮播图代码

一个简单的原生JS轮播图,响应式的,动画效果靠的是transfm,如果大佬改一下说不定就可以兼容IE8、9了。

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

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

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
<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的为参数就可以调用了

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

css样式部分注意不要有命名冲突,有什么问题或者需求的可以留言。

当前内容只有登录了才能查看,如果您已经注册,请登录
5

发表评论