大佬教程收集整理的这篇文章主要介绍了图片轮播,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
第一步,引入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‘: @H_801_229@500,26 ‘delay‘: @H_801_229@5000,27 ‘transition‘: ‘slide‘,28 ‘loop‘: true,29 ‘group‘: @H_801_229@1 30 }); 31 </script> 32 </body> 33 </html>
以上是大佬教程为你收集整理的图片轮播全部内容,希望文章能够帮你解决图片轮播所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。