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>
  • 相关阅读:
    编程的发展史及Python简介
    计算机的主要部件和组成
    编程二连
    数据库中的数据类型
    数据库概念和基本操作(mysql的操作)
    并发编程之协程
    并发编程之多线程
    网络编程之socket编程
    并发编程之多进程
    网络编程之网络协议
  • 原文地址:https://www.cnblogs.com/lsyw/p/10970647.html
Copyright © 2011-2022 走看看