点击这里查看效果
可自定义数字样式和左右点击按钮

这个更好：
移入按钮切换版本

更多图片轮播

以下是HTML文件代码：

  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.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  6.  <style type="text/css">
  7.  *{padding:0; margin:0;}
  8.  </style>
  9.  <link type="text/css" rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery.pictrueScroll.css" />
  10.  <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery-1.7.1.min.js"></script>
  11.  <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery.pictureScroll.js"></script>
  12.  <script type="text/javascript" >
  13.  $(function(){
  14.  $("#testScroll").pictrueScrollPlugin({'timeout':2000});
  15.  });
  16.  </script>
  17.  <title>jQ图片播放切换左右控制-柯乐义</title>
  18.  </head>
  19.  
  20.  <body>
  21.  <div style="width:800px;margin:0px auto;"><h1>图片播放切换控制</h1>
  22.  <div><a href="http://keleyi.com/a/bjac/bb5e7986.htm" target="_blank">原文</a></div>
  23.  </div>
  24.  <div class="pic_scroll_box" id="testScroll">
  25.  <ul>
  26.  <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/01.jpg" /></a></li>
  27.  <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/02.jpg" /></a></li>
  28.  <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/03.jpg" /></a></li>
  29.  <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/04.jpg" /></a></li>
  30.  <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/05.jpg" /></a></li>
  31.  </ul>
  32.  <div class="nums">
  33.  <span class="on"></span>
  34.  <span></span>
  35.  <span></span>
  36.  <span></span>
  37.  <span></span>
  38.  </div>
  39.  
  40.  </div>
  41.  </body>
  42.  </html>

web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html

转载自：http://keleyi.com/a/bjac/bb5e7986.htm

jquery图片播放切换插件的更多相关文章

  1. 美女jquery图片播放器插件

    相册在线查看http://keleyi.com/keleyi/phtml/image/6.htm 可全屏,可拖动,可自动播放的jquery图片展示插件 使用说明:1.引用css文件:<link ...

  2. 分享8款精美的jQuery图片播放插件

    本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5 ...

  3. jquery图片播放插件Fancybox使用详解

    今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...

  4. 一款超炫的jquery图片播放插件[Cloud Carousel]

    今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...

  5. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  6. 八款强大的jQuery图片滑块动画插件

    jQuery是一款相当轻巧的JavaScript框架,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是 一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多 ...

  7. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  8. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  9. jQuery图片自动添加水印插件

    JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...

随机推荐

  1. iOS-在团队开发过程中控制代码版本

    Cornerstone Svn简单使用指南: -- what if 负责编写 一.安装并拷贝项目 1.第一步:安装svn.2.第二步:第一个使用svn,找到“Check Out Working Cop ...

  2. WPF入门教程系列十七——WPF中的数据绑定(三)

    四. XML数据绑定 这次我们来学习新的绑定知识,XML数据绑定.XmlDataProvider 用来绑定 XML 数据,该XML数据可以是嵌入.Xmal文件的 XmlDataProvider 标记中 ...

  3. Security8：删除Role 和 User

    数据库的Role 和 User都是基于Specified DB的,在删除这些Principal之前,必须使用Use clause,切换到指定的DB中. sys.database_role_member ...

  4. WPF datagrid 加入图片

    <DataGridTemplateColumn Header="图像" Width="SizeToCells"> <DataGridTempl ...

  5. 判断checkbox的checked状态（jQuery写法）

    $('#checkboxInput').click(function(){ if (this.checked){ $('.questionContainer').css({ "opacity ...

  6. Why Namespace? - 每天5分钟玩转 OpenStack（102）

    上一节我们讨论了 Neutron 将虚拟 router 放置到 namespace 中实现了不同 subnet 之间的路由.今天探讨为什么要用 namespace 封装 router? 回顾一下前面的 ...

  7. Android sendevent/getevent 用法

    前言:最近在弄一个模拟用户点击屏幕的功能,并且不需要用户点击屏幕,后台自动给输入框赋值,类似pc端按键精灵的功能,在网上找了很多人的资料,写的都不是太详细,一知半解.还要自己慢慢研究.于是我这边写一篇 ...

  8. 初试Code First（附Demo）

    写在前面 新建项目 安装EntityFramework程序包 创建模型 创建上下文DbContext 创建数据库.读/写数据 配置连接字符串 Code First 迁移 示例Demo下载 后记 以前逛 ...

  9. C语言 编程练习22题

    一.题目 1.编一个程序,输入x的值,按下列公式计算并输出y值: 2.已知数A与B,由键盘输入AB的值,交换它们的值,并输出. 3.给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位 ...

  10. canvas实现拖动页面时显示窗口视频

    简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...