效果预览：http://hovertree.com/code/jquery/smjv6d0n.htm

基于jQuery编写的横向自适应幻灯片切换特效

全屏自适应jquery焦点图切换特效，在IE6这个蛋疼的浏览器兼容性问题上得到了和谐，兼容IE6。

适用浏览器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

代码如下：

 <!DOCTYPE html>

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

 <head>

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

 <title>jQuery自适应满屏图片轮播切换 - 何问起</title>

 <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script>

 <script type="text/javascript" src="http://hovertree.com/texiao/jquery/30/js/hoverslide.js"></script>

 </head>

 <body>

 <style type="text/css">

 * {

     margin:0;

     padding:0;

     list-style:none;

 }

 body {

     background:#fff;

     font:normal 12px/22px 宋体;

     width:100%;

 }

 img {

     border:0;

 }

 a {

     text-decoration:none;

     color:#333;

 }

 a:hover {

     color:#1974A1;

 }

 #footer {

     text-align:center;

 }

 .fullSlide {

     width:100%;

     position:relative;

     height:410px;

     background:#000;

 }

 .fullSlide .bd {

     margin:0 auto;

     position:relative;

     z-index:0;

     overflow:hidden;

 }

 .fullSlide .bd ul {

     width:100% !important;

 }

 .fullSlide .bd li {

     width:100% !important;

     height:410px;

     overflow:hidden;

     text-align:center;

 }

 .fullSlide .bd li a {

     display:block;

     height:410px;

 }

 .fullSlide .hd {

     width:100%;

     position:absolute;

     z-index:1;

     bottom:0;

     left:0;

     height:30px;

     line-height:30px;

 }

 .fullSlide .hd ul {

     text-align:center;

 }

 .fullSlide .hd ul li {

     cursor:pointer;

     display:inline-block;

     *display:inline;

     zoom:1;

     width:42px;

     height:11px;

     margin:1px;

     overflow:hidden;

     background:#000;

     filter:alpha(opacity=50);

     opacity:0.5;

     line-height:999px;

 }

 .fullSlide .hd ul .on {

     background:#f00;

 }

 .fullSlide .prev,.fullSlide .next {

     display:block;

     position:absolute;

     z-index:1;

     top:50%;

     margin-top:-30px;

     left:15%;

     z-index:1;

     width:40px;

     height:60px;

     background:url(http://hovertree.com/texiao/jquery/30/images/slider-arrow.png) -126px -137px #000 no-repeat;

     cursor:pointer;

     filter:alpha(opacity=50);

     opacity:0.5;

     display:none;

 }

 .fullSlide .next {

     left:auto;

     right:15%;

     background-position:-6px -137px;

 }

 </style>

 <div class="fullSlide">

   <div class="bd">

     <ul>

       <li _src="url(http://hovertree.com/texiao/jquery/30/images/a.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="http://hovertree.com/code/"></a></li>

       <li _src="url(http://hovertree.com/texiao/jquery/30/images/b.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="http://hovertree.com/tiku/"></a></li>

       <li _src="url(http://hovertree.com/texiao/jquery/30/images/d.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="http://tool.hovertree.com/"></a></li>

       <li _src="url(http://hovertree.com/texiao/jquery/30/images/d.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="http://run.hovertree.com/code/"></a></li>

       <li _src="url(http://hovertree.com/texiao/jquery/30/images/e.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="http://keleyi.com"></a></li>

     </ul>

   </div>

   <div class="hd">

     <ul>

     </ul>

   </div>

   <span class="prev"></span> <span class="next"></span> </div>

 <script type="text/javascript">

 jQuery(".fullSlide").hover(function() {

     jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)

 },

 function() {

     jQuery(this).find(".prev,.next").fadeOut()

 });

 jQuery(".fullSlide").hoverslide({

     titCell: ".hd ul",

     mainCell: ".bd ul",

     effect: "fold",

     autoPlay: true,

     autoPage: true,

     trigger: "click",

     startFun: function(i) {

         var curLi = jQuery(".fullSlide .bd li").eq(i);

         if ( !! curLi.attr("_src")) {

             curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")

         }

     }

 });

 </script>

 <div style="text-align:center;clear:both; font-size:12px;">

 <p><a href="http://hovertree.com" target="_blank">何问起</a>分享网站整理</p>

 <p>适用浏览器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>

 <p>来源：何问起</p>

 </div>

 </body>

 </html>

网页特效：http://www.cnblogs.com/roucheng/p/texiao.html

基于jQuery的自适应图片左右切换的更多相关文章

  1. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  2. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  3. 基于jQuery适合做图片类网站的特效

    分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="c ...

  4. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  5. 基于jQuery环形图标菜单旋转切换特效

    分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览   源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...

  6. 七行jquery代码实现图片渐变切换【兼容ie6+、 Chrome、 Firefox】

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

  7. 分享一个自己写的基于JQuery的一个Web背景切换的Demo

    这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = functi ...

  8. jquery多组图片层次切换的焦点图

    效果:

  9. 基于jquery的页面分屏切换模板

    闲来无事,搞了个页面的分屏效果,先来看下效果: 出于可自定义宽高的目的,屏幕分块由CSS控制,由js控制估计等分模块效果一般. 程序相关说明: HTML结构: <div class=" ...

随机推荐

  1. Asp.Net MVC 分页、检索、排序整体实现

    很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功 ...

  2. 探索C#之虚拟桶分片

    阅读目录 背景 虚拟桶(virtual buckets) 实现 总结 背景 关于数据分片讨论最多的是一致性hash,然而它并不是分布式设计中的银弹百试百灵. 在数据稳定性要求比较高的场景下它的缺点是不 ...

  3. yformater - chrome谷歌浏览器json格式化json高亮json解析插件

    yformater是一款chrome浏览器插件,用来格式化(高亮)服务端接口返回的json数据. 实际上小菜并不是第一个写这种插件的,但是现有的chrome json格式化插件实在是不太好用,索性小菜 ...

  4. Hibernate 3.3.2 文档翻译 Day01

    Hibernate 3.3.2 文档翻译 翻译人:微冷的雨 第一次书写:2015年11月29日 本人呕心沥血之作,请细心阅读领悟! Day01-1.1 项目描述 微冷的雨翻译:例如,我们将要建立一个可 ...

  5. iOS----支付（微信支付、支付宝支付、银联支付控件集成支付）（转）

    资料 支付宝 //文档idk都包含了安卓.iOS版 银 联 银联官网资料 Demo Demo给了一个订单号,做测试使用,若出现支付失败什么的,可能是已经被别人给支付了,或者是服务器订单过期了 ~ 一. ...

  6. kafka 安装出现的几个问题

    1.安装kafka的过程出现两个问题 1)错误: 找不到或无法加载主类 kafka.Kafka 原因:    下载的是源码包,需要编译.可以下载Binary downloads: 2) ERROR I ...

  7. ASP.NET WebAPi之断点续传下载（上）

    前言 之前一直感觉断点续传比较神秘,于是想去一探究竟,不知从何入手,以为就写写逻辑就行,结果搜索一番,还得了解相关http协议知识,又花了许久功夫去看http协议中有关断点续传知识,有时候发觉东西只有 ...

  8. Oracle Database 11g Express Editon介绍及安装

    一.Oracle Database 11g Express版本介绍 公司项目开发中,使用的数据库是Oracle 10g和MySQL 5.5,最新因为开发需要,需要从后台读取一些数据.使用的客户端是PL ...

  9. 安装Ubuntu时分区选择

    最近购买来一台二手笔记本.型号是:Dell Latitude D520.回来之后就装上来Ubuntu12.04,开始是安装的UbuntuKylin 13.04.不知道是机器配置不行,还是本身系统有点卡 ...

  10. PHP关于web页面交互内容

    学php学了有一段时间了总结总结给大家分享一下 PHP中的引用 第一段程序: <?php $first_name="firstName"; $first=&$firs ...