插件描述：基于jquery的无缝轮播图简单实现,修改方便轮播图大小调整只需通过简单的样式修改即可。
使用方法
引入css，js：
<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>
配置插件：
$(".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
});若需要作用翻页按钮的动画按钮，加入如下代码：
$(".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
PREVIOUS:
NEXT:
相关插件-幻灯片和轮播图
讨论这个项目（19）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
果 0
2019/8/15 21:24:08
-
怎么改写li的宽度呢?我想改大,但是找不到这个设置
西瓜1
2019/8/15 23:33:40
-
宽度修改:root{--mywidth: 600px;--myheight: 350px}
果0
2019/8/16 0:25:36
-
我尝试改变这个值了,但是改变了之后,图片没有自适应大小,谢谢!;感觉图片的宽度被限制了
果0
2019/8/16 0:48:51
-
解决了,感谢指教!!!
SunJiaJing90 0
2019/8/14 17:28:42
-
你这个轮播图问题不是一点啊，兄弟 调节尺寸挺麻烦 也没有PC屏幕自应式 直接定义了一个 宽度600 高度350的类似常量root，我觉得你应该改的扩展性比较好在放上来
回复
PerterFeng?? 0
2018/5/7 10:14:14
<script type="text/javascriptt" src="./scripts/jquery-1.9.1.js"></script> <script type="text/javascriptt" src="./scripts/carousel.js"></script>
这里有点小错 应该是吧
我只有你一个吖0
2018/5/18 17:57:40
-
嗯嗯，多写了一个 t
crayon 0
2018/5/3 18:01:14
-
很厉害 我问一下你的那个把复制第一张图片的节点放到最后是不是没用啊 好像冒似没用到吧
我只有你一个吖0
2018/5/18 17:59:02
-
无缝轮播的原理就是这样的，只是你没有理解
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
