查看效果网址：
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. Elasticsearch5.0 安装问题集锦

    使用Elasticsearch5.0 必须安装jdk1.8 [elsearch@vm-mysteel-dc-search01 bin]$ java -version java version &quo ...

  2. Session for SSRS Report of Microsoft Dynamics AX

    Session for SSRS Report of Microsoft Dynamics AX 版权声明:本文为博主原创文章,未经博主允许不得转载. Contract •A data contrac ...

  3. iOS----集成ijkplayer视频直播

    ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...

  4. Qt on Android：创建可伸缩界面

    使用 Qt 来开发 Android 应用,也需要适配不同移动设备,适配多种多样的屏幕和分辨率.这次我们大概来讲一下如何使用 Qt 提供的机制来创建可伸缩的界面. DPI 必须要解释一下 DPI . D ...

  5. C# 获取当前月第一天和最后一天 计算两个日期差多少天

    获取当前月的第一天和最后一天 DateTime now = DateTime.Now; DateTime firstDay = ); DateTime lastDay = firstDay.AddMo ...

  6. Cmd Markdown编辑器简明语法手册

    标签: Cmd-Markdown 1. 斜体和粗体 使用 * 和 ** 表示斜体和粗体. 示例: 这是 斜体,这是 粗体. 2. 分级标题 使用 === 表示一级标题,使用 --- 表示二级标题. 示 ...

  7. UCOSII内核代码分析

    1 UCOSII定义的关键数据结构 OS_EXT  INT8U             OSIntNesting; OSIntNesting用于判断当前系统是否正处于中断处理例程中. OS_EXT   ...

  8. 如何利用sendmail发送外部邮件？

    在写监控脚本时,为了更好的监控服务器性能,如磁盘空间.系统负载等,有必要在系统出现瓶颈时,及时向管理员进行报告.在这里通常采用邮件报警,同时,邮件设置为收到邮件,即向指定手机号码发送短信.这样可以实现 ...

  9. .Net处理Oracle中Clob类型字段总结

    最近在做项目中用到Clob这个字段,Clob是存储无限长字符的Oracle字段,用的时候网上找资料找了好久,内容不是很多,大部分都不能用,当然也有可以用的,测试了不同版本,整理了一下,给大家在做项目的 ...

  10. [c++] constexpr and literal class

    稀奇古怪的新特性,菜鸟在此啄上一啄. 1. When should literal classes be used in C++?   2. int i; // not constant const ...