zoukankan      html  css  js  c++  java
  • jQuery-图片轮播-随意切换图片

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title>图片切换插件Nivo Slider</title>
     5     <link href="Css-8-8/nivo-slider.css" 
     6           rel="stylesheet" type="text/css" />
     7     <link href="Css-8-8/theme-default.css" 
     8           rel="stylesheet" type="text/css" />   
     9     <script type="text/javascript" 
    10             src="Jscript/jquery-1.8.2.min.js">
    11     </script>
    12     <script type="text/javascript"
    13             src="Js-8-8/jquery.nivo.slider.js">
    14     </script>
    15     <script type="text/javascript">
    16         $(function() {
    17             $('#slider').nivoSlider({
    18                 effect: 'boxRandom', //图片随机切换效果
    19                 beforeChange: function() { }, //可编写图片切换之前回调函数
    20                 afterLoad: function() { }, //可编写图片加载之后回调函数
    21                 controlNavThumbs: true, //使用缩略图控制导航
    22                 manualAdvance: true //需要手动切换
    23             });
    24         });
    25     </script>
    26 </head>
    27 <body>
    28     <div class="theme-default">
    29         <div id="slider" class="nivoSlider">
    30             <a href="javascript:">
    31                <img src="Pic-8-8/img01.jpg" alt="01" 
    32                     data-thumb="Pic-8-8/img01.jpg" title="第1幅图片"/>
    33                </a>
    34             <a href="javascript:">
    35                <img src="Pic-8-8/img02.jpg" alt="02" 
    36                     data-thumb="Pic-8-8/img02.jpg" title="第2幅图片"/>
    37             </a>
    38             <a href="javascript:">
    39                <img src="Pic-8-8/img03.jpg" alt="03"
    40                     data-thumb="Pic-8-8/img03.jpg" title="第3幅图片"/>
    41             </a>
    42             <a href="javascript:">
    43                <img src="Pic-8-8/img04.jpg" alt="04"
    44                     data-thumb="Pic-8-8/img04.jpg" title="第4幅图片"/>
    45             </a>
    46             <a href="javascript:">
    47                <img src="Pic-8-8/img05.jpg" alt="05"
    48                     data-thumb="Pic-8-8/img05.jpg" title="第5幅图片"/>
    49             </a>
    50         </div>
    51     </div>
    52 </body>
    53 </html>
  • 相关阅读:
    jquery.autocomplete 使用解析
    《SEO实战密码》
    Thinkphp 生成的验证码不显示问题解决
    css去除li的小圆点
    css隐藏input边框阴影
    HBuilde 申请密钥证书
    请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径
    js 判断屏幕下拉上滑操作
    gis 从WGS84转百度
    GIS个坐标系转换
  • 原文地址:https://www.cnblogs.com/longly/p/6597432.html
Copyright © 2011-2022 走看看