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

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

更多图片轮播

以下是HTML文件代码：

 <!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>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta http-equiv="X-UA-Compatible" content="IE=8" />

 <style type="text/css">

 *{padding:0; margin:0;}

 </style>

 <link type="text/css" rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery.pictrueScroll.css" />

 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery-1.7.1.min.js"></script>

 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/10/jquery.pictureScroll.js"></script>

 <script type="text/javascript" >

 $(function(){

 $("#testScroll").pictrueScrollPlugin({'timeout':2000});

 });

 </script>

 <title>jQ图片播放切换左右控制-柯乐义</title>

 </head>

 <body>

 <div style="width:800px;margin:0px auto;"><h1>图片播放切换控制</h1>

 <div><a href="http://keleyi.com/a/bjac/bb5e7986.htm" target="_blank">原文</a></div>

 </div>

 <div class="pic_scroll_box" id="testScroll">

 <ul>

 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/01.jpg" /></a></li>

 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/02.jpg" /></a></li>

 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/03.jpg" /></a></li>

 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/04.jpg" /></a></li>

 <li><a><img src="http://keleyi.com/keleyi/phtml/jqtexiao/10/images/05.jpg" /></a></li>

 </ul>

 <div class="nums">

 <span class="on"></span>

 <span></span>

 <span></span>

 <span></span>

 <span></span>

 </div>

 </div>

 </body>

 </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. 20个JS优化代码技巧

    原文网址链接为:http://www.jstips.co/ .截取了一部分本人认为比较实用的技巧分享给大家.其中一小部分技巧为JS面向对象的写法,不宜一一列出.关于JS面向对象的写法可参考本人前几篇随 ...

  2. for循环或Repeat里面对某个字段进行复杂处理的解决方案

    在后台用一个方法处理

  3. Sql Server系列：数据库组成及系统数据库

    1. 数据库组成 数据库的存储结构分为逻辑存储结构和物理存储结构. ◊ 逻辑存储结构:说明数据库是由哪些性质的信息所组成.SQL Server的数据库不仅仅只是数据的存储,所有与数据处理操作相关的信息 ...

  4. Autocomplete 自动补全（Webform实战篇）

    开篇语 因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...

  5. The Installation and Compilation of OpenCASCADE

    OpenCASCADE的编译 The Installation and Compilation of OpenCASCADE eryar@163.com 一. 安装OpenCASCADE 可以从Ope ...

  6. Cnblogs支持Latex及测试

    为了方便后续机器学习文章的书写,因此在cnblogs中设置了支持Latex. 设置: 在"后台管理"中"页首Html代码"中加入如下代码: <script ...

  7. MVC4做网站后台:用户管理 ——用户组 1、添加用户组

    打开控制器UserGroupController 添加Add action /// <summary> /// 添加用户组 /// </summary> /// <ret ...

  8. Android自定义属性

    上一篇讲解了Android自定义View,这篇来讲解一下Android自定义属性的使用,让你get新技能.希望我的分享能帮助到大家. 做Android布局是件很享受的事,这得益于他良好的xml方式.使 ...

  9. 利用Dockerfile构建一个基于centos 7，包括java 8, tomcat 7,php ,mysql+mycat的镜像

    Dockerfile内容如下: FROM centos MAINTAINER Victor ivictor@foxmail.com WORKDIR /root RUN rm -f /etc/yum.r ...

  10. C语言 第二章 数据类型、变量和输入函数

    一.数据类型简介 在 C 语言中,数据类型指的是用于声明不同类型的变量或函数的一个广泛的系统.变量的类型决定了变量存储占用的空间,以及如何解释存储的位模式. 类型转换: 类型 存储大小 值范围 cha ...