jquery图片轮播插件_html轮播图怎么做

全栈程序员站长

发布于 2022-09-20 10:49:08

10.9K0

发布于 2022-09-20 10:49:08

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

轮播图插件为简易的jQuery轮播图，实现点击无缝轮播，可用在移动端。

样式有问题，叠加修改即可。

下载地址：https://github.com/Summer-Lin/carousel

HTML代码：

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4 <meta charset="UTF-8">  5 <title>轮播图</title>  6 <meta name="viewport"  7  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  8 <link rel="stylesheet" href="jquery.carousel.css">  9 </head> 10 11 <body> 12 <div class="carousel"> 13 <ul> 14 <li> 15 <img src="images-images/15i58PIC8bY_1024.jpg" alt=""> 16 </li> 17 <li> 18 <img src="images-images/11bOOOPIC57_1024.jpg" alt=""> 19 </li> 20 <li> 21 <img src="images-images/42bOOOPIC17_1024.jpg" alt=""> 22 </li> 23 <li> 24 <img src="images-images/86bOOOPIC6f_1024.jpg" alt=""> 25 </li> 26 <li> 27 <img src="images-images/7169564_150201558312_2.jpg" alt=""> 28 </li> 29 <li> 30 <img src="images-images/11580677_090537203000_2.jpg" alt=""> 31 </li> 32 <li> 33 <img src="images-images/0018031184864859_b.jpg" alt=""> 34 </li> 35 <li> 36 <img src="images-images/CgQDr1PUudmAbC0sAAPmtISRmjM32500.jpg" alt=""> 37 </li> 38 </ul> 39 </div> 40 41 <script src="jquery-1.11.3.js"></script> 42 <script src="jquery.carousel.js"></script> 43 <script> 44  $(function () { 45  $('.carousel').carousel() 46  }) 47 </script> 48 49 </body> 50 </html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/168288.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https