查看效果网址：
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. for 循环打印图形

    public class For { public static void main(String[] args) { //"使用双层for循环打印图形时,外层管行,内层管列",那 ...

  2. iOS开发-应用崩溃日志揭秘（一）

    作为一名应用开发者,你是否有过如下经历? 为确保你的应用正确无误,在将其提交到应用商店之前,你必定进行了大量的测试工作.它在你的设备上也运行得很好,但是,上了应用商店后,还是有用户抱怨会闪退 ! 如果 ...

  3. tomcat 的优化配置

    一.关于并发连接量的配置 在tomcat的server.xml配置文件中:将<Connector port="8080" protocol="HTTP/1.1&qu ...

  4. .Net 转战 Android 4.4 日常笔记（4）--按钮事件和国际化

    我们知道资源被注册到R.java我们通过R.java就可以读取到界面中的组件.跟我们.net一样,通过ID来读取组件 知识点: 通过R.java读取组件 MainActivity.java通过find ...

  5. 【结果很简单,过程很艰辛】记阿里云Ons消息队列服务.NET接口填坑过程

    Maybe 这个问题很简单,因为解决方法是非常简单,但填坑过程会把人逼疯,在阿里云ONS工作人员.同事和朋友的协助下,经过一天的调试和瞎捣鼓,终于解决了这个坑,把问题记下来,也许更多人在碰到类似问题的 ...

  6. 应用程序框架实战十六:DDD分层架构之值对象（介绍篇）

    前面介绍了DDD分层架构的实体,并完成了实体层超类型的开发,同时提供了验证方面的支持.本篇将介绍另一个重要的构造块——值对象,它是聚合中的主要成分. 如果说你已经在使用DDD分层架构,但你却从来没有使 ...

  7. Linux入门

    参考资料:http://www.92csz.com/study/linux/ [Linux系统目录结构] 登录系统后,在当前命令窗口下输入 ls / 你会看到 以下是对这些目录的解释: /bin bi ...

  8. 会务准备期间材料准备工作具体实施总结 ----（vim技巧应用, python信息提取与整合, microsoft word格式调整批量化)

    会务准备期间材料准备工作具体实施总结(vim, python, microsoft word) span.kw { color: #007020; font-weight: bold; } code ...

  9. UWP开发入门（二十二）——Storyboard和Animation

    微博上有同学问我MyerSplash是如何实现那个很炫的图片点亮,然后移动到屏幕中央的效果.惭愧啊,我又不是作者哪里会知道.硬着头皮去GitHub拜读了高手的代码,自愧弗如,比我不知道高到哪里去了…… ...

  10. Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...