查看效果网址：
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. iOS-大神们的博客收集

    唐巧的技术博客 http://blog.devtang.comOneV's Den http://onevcat.com破船之家 http://beyondvincent.comNSHipster h ...

  2. angularjs揭秘

    angularjs揭秘

  3. 解读sencha touch移动框架的核心架构(一)

    sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架 那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构 ...

  4. Unity 特殊文件夹 : 位置不能随便放

    有以下几个文件夹: Assets 用来存放资源的文件夹,包括各种材质.模型等 Editor 编辑器类等脚本 Editor Default Resources Editor scripts can ma ...

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

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

  6. 【转】C#调用Windows图片和传真查看器打开图片

    //建立新的系统进程 System.Diagnostics.Process process = new System.Diagnostics.Process(); //设置文件名,此处为图片的真实路径 ...

  7. 被嫌弃的eval和with

    × 目录 [1]eval [2]with 前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过 ...

  8. 白话贝叶斯理论及在足球比赛结果预测中的应用和C#实现

    离去年“马尔可夫链进行彩票预测”已经一年了,同时我也计划了一个彩票数据框架的搭建,分析和预测的框架,会在今年逐步发表,拟定了一个目录,大家有什么样的意见和和问题,可以看看,留言我会在后面的文章中逐步改 ...

  9. Service Plugin / Agent - 每天5分钟玩转 OpenStack（73）

    Core Plugin/Agent 负责管理核心实体:net, subnet 和 port.而对于更高级的网络服务,则由 Service Plugin/Agent 管理.Service Plugin ...

  10. reflow和repaint（摘录自张鑫旭的翻译）

    //正文开始 关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布. 第一次让我开始思考关于回流(reflo ...