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

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

更多图片轮播

以下是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. Base64编码原理分析

    Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,在了解Base64编码之前,先了解几个基本概念:位.字节. 位:"位(bit)"是计算机中最小的数据单位.每一位 ...

  2. LINQ系列：LINQ to SQL Where条件

    1. 单一条件查询 var expr = context.Products .Where(p => p.ProductName == "LINQ to SQL"); SELE ...

  3. JavaScript 命名空间

    <script type="text/javascript"> Namespace=new Object(); Namespace.register=function( ...

  4. SpringMVC那点事

    一.SpringMVC返回json数据的三种方式 1.第一种方式是spring2时代的产物,也就是每个json视图controller配置一个Jsoniew. 如:<bean id=" ...

  5. Python深入06 Python的内存管理

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 语言的内存管理是语言设计的一个重要方面.它是决定语言性能的重要因素.无论是C语言的 ...

  6. 基于Bootstrap里面的Button dropdown打造自定义select

    最近工作非常的忙,在对一个系统进行改版.项目后台是MVC1.0开发的,但是前端部分已经改过几个版本,而已之前的设计师很强大,又做设计又做前端开发.而已很时尚和前沿,使用了一直都很热门的Bootstra ...

  7. Lua 学习笔记（十一）元表与元方法

    在Lua中的每个值都有一套预定义的操作集合.例如可以将数字相加,可以连接字符串,还可以在table中插入一对key-value等.但是我们无法将两个table相加,无法对函数作比较,也无法调用一个字符 ...

  8. Front End Developer Questions 前端开发人员问题（二）CSS 后续

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...

  9. 利用GeoWebCache实现WebGIS地形图展示的缓存优化

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在WebGIS中,影像金字塔是一个很重要的概念.在WebGI ...

  10. YAML 语法

    YAML 语法 来源:yaml 这个页面提供一个正确的 YAML 语法的基本概述, 它被用来描述一个 playbooks(我们的配置管理语言). 我们使用 YAML 是因为它像 XML 或 JSON ...