每次要用轮播 都要找好久 决定一起理一理 就弄些常用的 原生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);
}
我是欢快的最终分割线~ 收工!