zoukankan      html  css  js  c++  java
  • 图片轮播

    第一步,引入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>
  • 相关阅读:
    RabbitMQ-RPC版主机管理程序
    FTP
    主机管理程序
    高级FTP
    选课系统
    电子银行购物商城
    计算器
    员工信息查询系统
    工资管理系统
    三级菜单
  • 原文地址:https://www.cnblogs.com/q2546/p/10954298.html
Copyright © 2011-2022 走看看