插件描述：基于jquery的无缝轮播图简单实现,修改方便轮播图大小调整只需通过简单的样式修改即可。
使用方法
引入css，js：
1 2 3 | <link rel="stylesheet" type="text/css" href="./css/style.css"> <scriptt type="text/javascriptt" src="./scriptts/jquery-1.9.1.js"></scriptt> <scriptt type="text/javascriptt" src="./scriptts/carousel.js"></scriptt> |
配置插件：
1 2 3 4 5 6 7 8 9 10 | $(".carousel-content").carousel({ carousel: ".carousel", //轮播图容器 indexContainer: ".img-index", //下标容器 prev: ".carousel-prev", //左按钮 next: ".carousel-next", //右按钮 timing: 3000, //自动播放间隔 animateTime: 700, //动画时间 autoPlay: true, //是否自动播放 true / false direction: "left", //滚动方向right / left}); |
若需要作用翻页按钮的动画按钮，加入如下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(".carousel-content").hover(function() { $(".carousel-prev,.carousel-next").fadeIn(300);}, function() { $(".carousel-prev,.carousel-next").fadeOut(300);});$(".carousel-prev").hover(function() { $(this).find("img").attr("src", "./images/left2.png");}, function() { $(this).find("img").attr("src", "./images/left1.png");});$(".carousel-next").hover(function() { $(this).find("img").attr("src", "./images/right2.png");}, function() { $(this).find("img").attr("src", "./images/right1.png");}); |
有问题可联系作者 QQ：1057503612
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： JS模拟浏览器吸管抓取颜色插件(原创)
- 下一个特效： Combobox 下拉插件(原创)