zoukankan      html  css  js  c++  java
  • jQuery 插件 jSlider 图片轮播

    jSlider 是一个非常好的图片轮播插件。

    导航箭头,可以自动播放,可以循环播放

    官方网站 https://github.com/copthuy/jSlider

    复制代码
    <!DOCTYPE html>
    <html lang="zh">
        <head>
            <meta charset="utf-8">
            <title>jSlider 图片轮播插件</title>
            <meta name="description" content="jSlider JS example">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <!--引用css样式-->
            <link rel="stylesheet" href="jSlider.min.css">
        </head>
        <body>
         
            <div class="jSlider" id="slider-example">
                <div><img src="images/photo1.png"></div>
                <div><img src="images/photo2.png"></div>
                <div><img src="images/photo3.png"></div>
                <div><img src="images/photo4.png"></div>
                <div><img src="images/photo5.png"></div>
                <div><img src="images/photo6.png"></div>
            </div>
             <!--引用jquery.js样式-->
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
            </script>
    <!--引用js样式--> <script src="jquery.jSlider.min.js"></script>
    <!--初始化图片轮播jSlider --> <script> $('#slider-example').sliderInit({ 'navigation': 'hover', 'indicator': 'always', 'speed': 500, //速度 'delay': 5000, //延迟 'transition': 'slide', 'loop': true, 'group': 1 }); </script> </body> </html>
  • 相关阅读:
    自动部署基于Maven的war文件到远程Tomcat
    解决Eclipse中新创建的Maven项目不自动创建web.xml文件
    JFreeChart
    hibernate
    hibernate
    hibernate
    hibernate
    Hibernate
    hibernate关联关系映射详解
    Hibernate获取数据java.lang.StackOverflowError
  • 原文地址:https://www.cnblogs.com/lsyw/p/11054880.html
Copyright © 2011-2022 走看看