JS原生图片轮播笔记

每次要用轮播 都要找好久 决定一起理一理 就弄些常用的 原生JS 。
在网上收集的，会附上出处。
没弄截图，看效果请戳“效果”后面的链接。

吐槽先 为啥网站们都要有个轮播呢

原生JS 插件

淡入淡出

这个是原生的 所以我很喜欢 哈哈哈
出处：js淡入淡出图片切换效果
效果：原生淡入淡出
参数如下：

/**
 * tkSwitchAD 图片切换
 * id  string ul#id
 * bid string div#id 按钮
 * delay float  间隔时间
 * v     float  淡入淡出动画系数
*/

示例

<script">
    var _tkADD = new tkSwitchAD("tklistt","tkBottunn",2000,20);
</script>

左右切换

出处:原生js焦点图，可以点击左右切换。
效果：左右切换

参数示例

Effect.slider({
    'target': 'slider', //轮播元素的id
    'showMarkers': true, //显示数字序号
    'showControls': true //显示左右控制
});

我咋觉得比较常用的就这2个了。所以原生JS轮播部分结束。

---

乱入 电脑里静静躺着的轮播插件

需要各种酷炫效果的 还是百度找jquery插件。
我看看电脑里有存哪些插件，给个名字给个网址，大家有兴趣的可以去瞅瞅。
S Gallery
owl carousel
Orbit
ResponsiveSlides.js
unslider

---

手机端小tip

最后附送个小tip
手机端做轮播的时候，基本都是用swipe.js
但会有一个问题，就是图片用手指滑动后会停止自动轮播。
解决方法：改下stop函数

function stop() {
 //delay = 0;
 delay = options.auto > 0 ? options.auto : 0;
 clearTimeout(interval);
 }

---

我是欢快的最终分割线~ 收工！