插件描述：一个简单的原生JS轮播图，响应式的，动画效果靠的是transfm，如果大佬改一下说不定就可以兼容IE8、9了
发布时间：2018-12-13 23:06
使用方法
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样式部分注意不要有命名冲突
有什么问题或者需求的可以留言，码字真累┭┮╊┭┮
PREVIOUS:
NEXT:
相关插件-幻灯片和轮播图
纯CSS全屏轮播滑块
用CSS制作交互式滑块，这是可能的，没有使用任何JavaScript。在这里下面教程告诉你如何使纯CSS不使用jQuery或基于JavaScript来创建全屏滑块。
幻灯片和轮播图
讨论这个项目（31）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
琉璃 0
2019/3/1 22:35:31
<!DOCTYPE html>
<lang html="en">
<head>
<title>视频练习</title>
<head>
<style>
#contain{
width:1325px;
height:1000px;
background-color:#CCCCCC;
}
#slider{
width:600px;
height:400px;}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="contain">
<div id="slider">
<ul>
<li><img src="text1.jpg"></li>
<li><img src="text2.jpg"></li>
<li><img src="text3.jpg"></li>
<li><img src="text4.jpg"></li>
</ul>
<div>
<span> < </span>
<span> > </span>
</div>
</div>
<script>
slideLlx("slider");
</script>
</div>
</body>
</html>请问有什么问题
西瓜0
2019/3/1 23:06:49
没有引用
<script src="js/slide.js"></script>
琉璃0
2019/3/2 12:26:44
发错了，已经加上了
<link rel="stylesheet" href="css/style.css">
还是不行、
西瓜0
2019/3/2 12:58:05
要调用相应的样式class="slide"，class="prev_btn"，class="next_btn"
<div id="contain"> <div id="slide" class="slide"> <ul> <li><img src="img/1.png"></li> <li><img src="img/2.png"></li> <li><img src="img/3.png"></li> <li><img src="img/4.png"></li> </ul> <div> <span class="prev_btn"> < </span> <span class="next_btn"> > </span></div> </div> </div>
琉璃0
2019/3/2 22:53:22
-
谢谢西瓜这位老哥，已经可以了，好人一生平安.
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
