查看效果网址：
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. Swift语言快速入门

    Swift语言快速入门(首部同步新版官方API文档和语法的Swift图书,确保代码可编译,作者专家在线答疑,图书勘误实时跟进) 极客学院 编著   ISBN 978-7-121-24328-8 201 ...

  2. 前端MVVM框架avalon揭秘 - 双向绑定原理

    avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...

  3. MVC解决Json DataGrid返回的日期格式是/Date(20130450000365)

    实际上是Json格式化问题,我们应该在返回json的时候进行格式化,我们需要重写系统的JsonResult类 using System; using System.Collections.Generi ...

  4. Neutron 如何支持多种 network provider - 每天5分钟玩转 OpenStack（70）

    Neutron 的架构是非常开放的,可以支持多种 network provider,只要遵循一定的设计原则和规范.本节我们将开始讨论这个主题. 先讨论一个简单的场景:在 Neutorn 中使用 lin ...

  5. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  6. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  7. 从零开始构建 Wijmo & Angular 2 小应用

    中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Angular 1.X 中的 directives, co ...

  8. SharePoint Server 2013 让上传文件更精彩

    新版的SharePoint 2013 提供了多种上传与新建文件的方式,对于与系统集成紧密的IE来上传文档更加方便 使用IE开启SharePoint地址 Figure 1打开文档库,在"新颖快 ...

  9. 记录一则ORA-12154，ORA-12560解决过程

    应用服务器:Windows Server 2008 R2 Enterprise 故障现象:项目侧同事反映应用服务器上的程序连接数据库报错:ORA-12560: TNS: 协议适配器错误 1.故障重现 ...

  10. 安卓SQLite常见错误

    利用闲时写了一个简单的Sql语句操作SQLite数据库,在用SimpleCursorAdapter时出了一个异常好久都没解决 Process: com.example.chunchuner.usesq ...