查看效果网址：
http://keleyi.com/a/bjad/4kwkql05.htm

本特效的jquery版本只支持1.9.0以下。

代码如下：

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

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

 <head>

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

 <title>jquery背景自动切换特效-柯乐义</title>

 <link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqplug/9/main.css" />

 <link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.css" />

 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script>

 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/9/bgstretcher.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

 // Initialize Backgound Stretcher

 $('BODY').bgStretcher({

 images: ['http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-1.jpg'

 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-2.jpg'

 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-3.jpg'

 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-4.jpg'

 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-5.jpg'

 , 'http://keleyi.com/keleyi/phtml/jqplug/9/images/sample-6.jpg'],

 imageWidth: 1024,

 imageHeight: 768,

 slideDirection: 'N',

 slideShowSpeed: 1000,

 transitionEffect: 'fade',

 sequenceMode: 'normal',

 buttonPrev: '#prev',

 buttonNext: '#next',

 pagination: '#nav',

 anchoring: 'left center',

 anchoringImg: 'left center'

 });

 });

 </script>

 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/9/main.js"></script>

 </head>

 <body>

 <div id="page" style="display: none_;">

 <div class="page-top">&nbsp;</div>

 <div class="page-content"><div class="page-wrapper">

 <h1>背景图片自动切换·柯乐义·Background Stretcher jQuery Plugin Demo</h1>

 <form action="#"><div>

 <div class="column">

 <div class="row">

 <h2>Transition Effect</h2>

 <select id="effect">

 <option value="none">None</option>

 <option value="fade">Fade</option>

 <option value="simpleSlide">Simple Slider</option>

 <option value="superSlide">Super Slider</option>

 </select>

 </div>

 <div class="row slide-directions">

 <h2>Slide Direction</h2>

 <div class="column small">

 <div class="row"><input type="radio" id="dir-n" name="direction" class="direction" checked="checked"/><label for="dir-n">North</label></div>

 <div class="row"><input type="radio" id="dir-s" name="direction" class="direction"/><label for="dir-s">South</label></div>

 <div class="row"><input type="radio" id="dir-w" name="direction" class="direction"/><label for="dir-w">West</label></div>

 <div class="row"><input type="radio" id="dir-e" name="direction" class="direction"/><label for="dir-e">East</label></div>

 </div>

 <div class="column small super-directions">

 <div class="row"><input type="radio" id="dir-nw" name="direction" class="direction"/><label for="dir-nw">North-West</label></div>

 <div class="row"><input type="radio" id="dir-ne" name="direction" class="direction"/><label for="dir-ne">North-East</label></div>

 <div class="row"><input type="radio" id="dir-sw" name="direction" class="direction"/><label for="dir-sw">South-West</label></div>

 <div class="row"><input type="radio" id="dir-se" name="direction" class="direction"/><label for="dir-se">South-East</label></div>

 </div>

 </div>

 <div class="row">

 <h2>Sequence Mode</h2>

 <input type="radio" id="normal" name="mode" class="mode" checked="checked"/><label for="normal">Normal</label>

 <input type="radio" id="back" name="mode" class="mode"/><label for="back">Back</label>

 <span class="mode-randome"><input type="radio" id="random" name="mode" class="mode"/><label for="random">Random</label></span>

 </div>

 </div>

 <div class="column">

 <div class="row">

 <h2>Manual Controls</h2>

 <div class="nav-buttons">

 <a href="javascript:;" id="prev">Previouse image</a>&nbsp;&nbsp;&nbsp;

 <a href="javascript:;" id="next">Next image</a>

 </div>

 </div>

 <div class="row nav-buttons">

 <span class="pager">Pager:</span> <div id="nav">&nbsp;</div>

 </div>

 <div class="row">

 <a href="javascript:;" id="toggleAnimation" >Pause Animation</a>

 </div>

 </div>

 </div></form>

 </div></div>

 <div class="page-bottom">&nbsp;</div>

 </div>

 <div style="text-align:center;clear:both">

 <br>

 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <a herf="http://keleyi.com/a/bjad/4kwkql05.htm">原文</a></p>

 </div>

 </body>

 </html>

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

jquery背景自动切换特效的更多相关文章

  1. jquery叠加页片自动切换特效

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...

  2. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  3. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  4. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. js 背景自动切换

    //首页自动更换背景特效开始============================================ var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组 ...

  6. Python3实现Win10桌面背景自动切换

    [本文出自天外归云的博客园] 得空写了个自动切换桌面背景图片的小程序.再不写python就要扔键盘了,对vue还有那么一点好感,天天php真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...

  7. jquery 图片自动切换

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

  8. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  9. CSS实现页面背景自动切换功能

    From here:http://xiaomiya.iteye.com/blog/2047728 请看效果图: 完整代码如下: <!DOCTYPE HTML> <html> & ...

随机推荐

  1. Npoi导出Excel 实战篇（Webform）

    开篇语 废话不多说,直接上遇到的问题 需求:在这个界面点击导出,导出页面数据,苦于没有做过webfrom项目,弄了半天还是没想到原生态的好方法,所以在网上看了下有没有导出的好例子,结果发现有人推荐使用 ...

  2. OPEN CASCADE Gauss Least Square

    OPEN CASCADE Gauss Least Square eryar@163.com Abstract. The least square can be used to solve a set ...

  3. ELF文件

    ELF文件格式是一个开发标准,各种UNIX系统的可执行文件都采用ELF格式,它有三种不同的类型: 可重定位的目标文件 可执行文件 共享库 现在分析一下上一篇文章中经过汇编之后生成的目标文件max.o和 ...

  4. iOS开发之版本控制（SVN）

    版本控制对于团队合作显得尤为重要,那么如何在iOS开发中进行版本控制呢?在今天的博客中将会介绍如何在MAC下配置SVN服务器,如何导入我们的工程,如何在Xcode中进行工程的checkOut和Comm ...

  5. C算法编程题（四）上三角

    前言 上一篇<C算法编程题(三)画表格> 上几篇说的都是根据要求输出一些字符.图案等,今天就再说一个“上三角”,有点类似于第二篇说的正螺旋,输出的字符少了,但是逻辑稍微复杂了点. 程序描述 ...

  6. 把《c++ primer》读薄（3-3 标准库bitset类型）

    督促读书,总结精华,提炼笔记,抛砖引玉,有不合适的地方,欢迎留言指正. //开头 #include <bitset> using std::bitset; 问题1.标准库bitset类型( ...

  7. hibernate笔记--基于主键的单(双)向的一对一映射关系

    上一节介绍的基于外键的一对一映射关系中,在Person表中有一个外键列idCard_id,对应的idCard表的主键id,至于基于主键的一对一映射关系,就是指Person表中抛弃了idcard_id这 ...

  8. 解析Exception和C#处理Exception的常用方法总结

    在.NET中,异常是指成员没有完成它的名称宣称可以完成的行动.在异常的机制中,异常和某件事情的发生频率无关. 异常处理四要素包括:一个表示异常详细信息的类类型:一个向调用者引发异常类实例的成员:调用者 ...

  9. WebSocket 介绍(二)-WebSocket API

    这一章介绍如何用WebSocket API来控制协议和创建应用,运用http://websocket.org 提供的现有WebSocket服务器,我们可以收发消息.创建一些简单的WebSocket应用 ...

  10. 设置 LongListSelector 只有在项多的时候才分组

    Windows Phone 中的控件LongListSelector是一个很好的分组聚类控件,当列表中数据特别多的时候,LongListSelector就像字典中的目录,让我们很快定位到要找的数据. ...