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>
  • 相关阅读:
    xfce4-windowck-plugin的替代品
    git使用Beyond Compare作为diff和merge工具
    Visual Studio设置多个快捷键
    scrapy参数-COOKIES_ENABLED 最权威解释, 帮你避坑
    Linux基础使用
    python 所有的库整理
    Nginx配置详解
    15个常用的javaScript正则表达式
    Redis开发建议
    mysql 同步大量数据小技巧
  • 原文地址:https://www.cnblogs.com/lsyw/p/11054880.html
Copyright © 2011-2022 走看看