<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>图片切换插件Nivo Slider</title>

     <link href="Css-8-8/nivo-slider.css"

           rel="stylesheet" type="text/css" />

     <link href="Css-8-8/theme-default.css"

           rel="stylesheet" type="text/css" />

     <script type="text/javascript"

             src="Jscript/jquery-1.8.2.min.js">

     </script>

     <script type="text/javascript"

             src="Js-8-8/jquery.nivo.slider.js">

     </script>

     <script type="text/javascript">

         $(function() {

             $('#slider').nivoSlider({

                 effect: 'boxRandom', //图片随机切换效果

                 beforeChange: function() { }, //可编写图片切换之前回调函数

                 afterLoad: function() { }, //可编写图片加载之后回调函数

                 controlNavThumbs: true, //使用缩略图控制导航

                 manualAdvance: true //需要手动切换

             });

         });

     </script>

 </head>

 <body>

     <div class="theme-default">

         <div id="slider" class="nivoSlider">

             <a href="javascript:">

                <img src="Pic-8-8/img01.jpg" alt="01"

                     data-thumb="Pic-8-8/img01.jpg" title="第1幅图片"/>

                </a>

             <a href="javascript:">

                <img src="Pic-8-8/img02.jpg" alt="02"

                     data-thumb="Pic-8-8/img02.jpg" title="第2幅图片"/>

             </a>

             <a href="javascript:">

                <img src="Pic-8-8/img03.jpg" alt="03"

                     data-thumb="Pic-8-8/img03.jpg" title="第3幅图片"/>

             </a>

             <a href="javascript:">

                <img src="Pic-8-8/img04.jpg" alt="04"

                     data-thumb="Pic-8-8/img04.jpg" title="第4幅图片"/>

             </a>

             <a href="javascript:">

                <img src="Pic-8-8/img05.jpg" alt="05"

                     data-thumb="Pic-8-8/img05.jpg" title="第5幅图片"/>

             </a>

         </div>

     </div>

 </body>

 </html>

jQuery-图片轮播-随意切换图片的更多相关文章

  1. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  2. Flexslider图片轮播、文字图片相结合滑动切换效果

    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...

  3. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  4. axure 动态面板制作图片轮播 （01图片轮播）

    利用Axure的动态面板组件制作图片轮播: 首先现在操作区添加一个动态面板组件: 鼠标放在动态面板上,右键单击选择面板状态管理,给动态面板设置名称并添加两条状态然后点击确定. 双击动态面板,然后双击s ...

  5. Flexslider插件实现图片轮播、文字图片相结合滑动切换效果

    插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...

  6. jquery图片轮播，单张图片轮播时间不同

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  8. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  9. 基于bootstrap的图片轮播效果展示

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

随机推荐

  1. xpath路径表达式

    简单说,xpath就是选择XML文件中节点的方法. 所谓节点(node),就是XML文件的最小构成单位,一共分成7种. - element(元素节点)- attribute(属性节点)- text ( ...

  2. debootstrap 配置

    在主机sudo su 切换到root mount proc jessie/proc -t proc mount sysfs jessie/sys -t sysfs chroot jessie /bin ...

  3. linux虚拟机设置本地yum源

    1.挂载ISO镜像 2.创建文件夹,用于挂载光盘,mkdir /mnt/cdrom mount /dev/cdrom /mnt/cdrom 3.修改 repo 文件 baseurl=file:///挂 ...

  4. 内存管理 垃圾回收 C语言内存分配 垃圾回收3大算法 引用计数3个缺点

    小结: 1.垃圾回收的本质:找到并回收不再被使用的内存空间: 2.标记清除方式和复制收集方式的对比: 3.复制收集方式的局部性优点: https://en.wikipedia.org/wiki/C_( ...

  5. jvisualvm All-in-One Java Troubleshooting Tool

    java 监控.故障.性能可视化分析 VisualVM: Download https://visualvm.github.io/download.html All-in-One Java Troub ...

  6. [python2] python 打印表格 prettytable

    rpm包: [root@D129 cli]# yum info python-prettytable Loaded plugins: fastestmirror Loading mirror spee ...

  7. [dpdk] service core

    dpdk 17.11 增加了一组新的API,serivce core 如命名,就是用一组core跑service函数. 我自己的测试程序如下: https://github.com/tony-caot ...

  8. <笔记>Effective Objective-C 2.0 编写高质量iOS与

    1. 内存管理-引用计数 2. 非对象类型  int float double char 3.运行时--编译器(编译时)函数调用 4.@class  缩短编译时间,降低依赖,耦合 5.使用字面量而不是 ...

  9. 最全的MonkeyRunner自动化测试从入门到精通（2）

    一.Python环境变量的配置 步骤一:在官网进行下载python安装包,官网下载的路径:https://www.python.org/,如图所示: 步骤二:下载完成后,双击安装包,进行如下安装的界面 ...

  10. 洛谷P3121 审查(黄金)Censoring(Gold) [USACO15FEB] AC自动机

    正解:AC自动机 解题报告: 传送门! 啊我好呆啊其实就挺模板题的,,,只是要一个栈搞一下,,,然后我就不会了,,,是看了题解才get的,,,QAQ 然后写下解法趴QwQ 首先看到多串匹配不难想到AC ...