效果预览: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. Kosaraju 算法查找强连通分支

    有向图 G = (V, E) 的一个强连通分支(SCC:Strongly Connected Components)是一个最大的顶点集合 C,C 是 V 的子集,对于 C 中的每一对顶点 u 和 v, ...

  2. .NET开发笔记(二十三) 谷歌地图下载

    关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...

  3. 软件工程(QLGY2015)博客点评总结

    目录 第一次作业(2015.5.9) 第二次作业(2015.5.21) 第三次作业(2015.6.11) 2015上半年软工助教总结 第一次作业(2015.5.9) 存在主要问题 1)书写这种练习博客 ...

  4. iOS开发系列--UITableView全面解析

    --UIKit之UITableView 概述 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信.QQ.新浪微博等软件基本上随处都是U ...

  5. 探索c#之不可变数据类型

    阅读目录: 不可变对象 自定义不可变集合 Net提供的不可变集合 不可变优点 不可变对象缺点 不可变对象 不可变(immutable): 即对象一旦被创建初始化后,它们的值就不能被改变,之后的每次改变 ...

  6. 使用vbs脚本进行批量编码转换

    使用vbs脚本进行批量编码转换 最近需要使用SourceInsight查看分析在Linux系统下开发的项目代码,我们知道Linux系统中文本文件默认编码格式是UTF-8,而Windows中文系统中的默 ...

  7. [ASP.NET MVC 大牛之路]01 - 开篇

    匆匆2014,转眼就到末尾了.在这一年,你还有哪事情些想做而没有做? 2014年在我身上发生了两件意义重大的事,一是正月初一宝宝出生,我升级成为了爸爸:二是进入了一家创业公司,成为了技术负责人. 去年 ...

  8. Gitcafe绑定自定义域名

    之前将自己练习写作工具替换为Markdown,部署工具改为Hexo,并且将托管地搬家到GitCafe之后,便是被各种的舒爽所围绕.具体折腾的详情参见使用Hexo搭建专属Blog.她们的组合方便快捷,让 ...

  9. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  10. 让hammer完美支持Pixi.js - 2D webG库

    由于项目改造,采用2D webG的pixi库,那么基于canvas的结构上,事件就是最大的一个问题了 改造的原理很简单,把hammer里面的addEventListeners事件绑定给第三方库代替,事 ...