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

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

更多图片轮播

以下是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. Java学习笔记(04)

    Java学习笔记(04) 如有不对或不足的地方,请给出建议,谢谢! 一.对象 面向对象的核心:找合适的对象做合适的事情 面向对象的编程思想:尽可能的用计算机语言来描述现实生活中的事物 面向对象:侧重于 ...

  2. VS-默认端口导致项目不能加载的解决方案

  3. 【源码】Word转PDF V1.0.1 小软件,供新手参考

    昨天有一朋友让我帮忙找一款Word转PDF的软件,今天自己捣鼓出点成果封装个Helper供大家使用~ 开源地址:https://github.com/dunitian/WordConvertPDF 软 ...

  4. 网络连接详细信息出现两个自动配置ipv4地址

    问题:网络连接详细信息出现两个自动配置ipv4地址,一个是有效地址,一个是无效地址. 解决办法:先将本地连接ip设置成自动获取,然后点击开始——>运行——>输入cmd,回车,进入命令行界面 ...

  5. 用bootstrap实现多张图片手动轮回

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAJoCAIAAABHhBX4AAAgAElEQVR4nOzdZXdcV7rg8fmIM2vm3r

  6. 在ASP.NET Web API项目中使用Hangfire实现后台任务处理

    当前项目中有这样一个需求:由前端用户的一个操作,需要触发到不同设备的消息推送.由于推送这个具体功能,我们采用了第三方的服务.而这个服务调用有时候可能会有延时,为此,我们希望将消息推送与用户前端操作实现 ...

  7. 设计数据库字段或者java中使用boolean型时需谨慎

    boolean型变量只有两个值 false和true,我们在设计数据库字段时或者定义java变量时会使用boolean,通常情况下开关类的变量使用无可非议,但请一定要考虑到扩展性. 使用前请仔细考虑一 ...

  8. Cesium应用篇:3控件(4)Geocoder

    Geocoder是一个非常简单的控件,但也是非常常用且实用的控件,顾名思义,Geocoder就是地理编码的意思,而平常我们经常会查询一些地物,也就是常用的POI搜索,就是Geocoder的功劳. 首先 ...

  9. 【JUC】JDK1.8源码分析之ReentrantLock(三)

    一.前言 在分析了AbstractQueuedSynchronier源码后,接着分析ReentrantLock源码,其实在AbstractQueuedSynchronizer的分析中,已经提到过Ree ...

  10. Android-Universal-Image-Loader 图片异步加载类库的使用

    在博客中看到一篇利用组件进行图片异步加载的文章在此作记录 原文:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载并缓存的 ...