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

全栈程序员-用户IM • 2022年8月3日上午11:16 • 未分类

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

轮播图插件为简易的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>