码迷,mamicode.com
首页 > 其他好文 > 详细

图片轮播

时间:2019-05-31 11:40:31      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:png   style   tran   编写   images   color   oct   class   div   

第一步,引入jquery.js

技术图片

第二步,引入css和js

 技术图片

技术图片

第三步,编写DOM代码

技术图片

第四步,初始化轮播jSlider

技术图片

完整代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片轮播</title>
 6     <link rel="stylesheet" href="css/jSlider.min.css">
 7 </head>
 8 <body>
 9 
10 <div class="jSlider" id="slider-example">
11     <div><img src="images/photo1.jpg"></div>
12     <div><img src="images/photo2.jpg"></div>
13     <div><img src="images/photo3.jpg"></div>
14     <div><img src="images/photo4.jpg"></div>
15     <div><img src="images/photo5.jpg"></div>
16     <div><img src="images/photo6.jpg"></div>
17 </div>
18 
19 <script src="js/jquery-3.3.1.min.js"></script>
20 <script src="js/jquery.jSlider.min.js"></script>
21 <script>
22     $(#slider-example).sliderInit({
23       navigation: hover, 
24       indicator: always, 
25       speed: 500, 
26       delay: 5000, 
27       transition: slide, 
28       loop: true, 
29       group: 1
30     }); 
31 </script>
32 </body>
33 </html>

 

图片轮播

标签:png   style   tran   编写   images   color   oct   class   div   

原文地址:https://www.cnblogs.com/q2546/p/10954298.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!