• 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>
  • 相关阅读:
    2016CCPC长春
    POJ 3974
    CH 1401
    POJ 1426
    hihocoder 1829
    江南OJ 1151
    POJ 3279
    POJ 3349
    POJ 3278
    ZOJ 3983
  • 原文地址:https://www.cnblogs.com/lsyw/p/10970647.html
Copyright © 2020-2023  润新知