<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 焦点图轮换</title>
<meta name="keywords" content="jquery插件,jquery焦点图,jquery幻灯片">
<meta name="description" content="一款基于jQuery的焦点图轮换插件，可自定义外观及调用参数，兼容主流浏览器。">
<link href="css/base.css" rel="stylesheet">
<link href="css/code.css" rel="stylesheet">
<style>
/* 焦点图
------------------------------ */
.home_slide{position:relative;width:600px;height:280px;}
.home_slide .list{display:none;}
.home_slide .btn{overflow:hidden;position:absolute;bottom:8px;right:8px;}
.home_slide .btn li{float:left;width:18px;height:18px;margin:0 0 0 10px;color:#fff;border-radius:8px;background:#2f2f2f;font:normal 11px/18px Tahoma;text-align:center;cursor:pointer;}
.home_slide .btn .selected{background:#761f25;}
.home_slide .new{display:none;position:absolute;top:0;left:0;}
/* 彩色按钮
.home_slide .btn li{float:left;width:12px;height:12px;margin:0 10px 0 0;border-radius:6px;line-height:0;font-size:0;cursor:pointer;}
.home_slide .btn .selected{width:8px;height:8px;border:2px solid #fff;}
.home_slide .btn .b_1{background:#8d44fb;}
.home_slide .btn .b_2{background:#ff7200;}
.home_slide .btn .b_3{background:#ffd022;}
.home_slide .btn .b_4{background:#0073d4;}
.home_slide .btn .b_5{background:#54dc33;}
*/
/* 焦点图 按钮+左右切换
------------------------------ */
.slide_all{overflow:hidden;position:relative;width:600px;height:280px;border:1px solid #999;}
.slide_all .list{overflow:hidden;position:absolute;top:0;left:0;}
.slide_all .list li{float:left;width:600px;}
.slide_all .btn{overflow:hidden;position:absolute;bottom:10px;left:240px;padding:5px 15px 5px 5px;border-radius:6px;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99FFFFFF', endColorstr='#99FFFFFF');background:rgba(255,255,255,0.5);}
.slide_all .btn li{float:left;width:12px;height:12px;margin:0 0 0 10px;color:#fff;border-radius:12px;background:#2f2f2f;font:normal 0/0 Arial;text-align:center;cursor:pointer;}
.slide_all .btn .selected{background:#090;}
.slide_all .plus,
.slide_all .minus{position:absolute;top:110px;width:40px;height:50px;background-image:url(img/control.png);background-repeat:no-repeat;text-align:center;cursor:pointer;}
.slide_all .plus{left:0;background-position:0 0;}
.slide_all .minus{right:0;background-position:-40px 0;}
.slide_all .plus:hover{background-position:0 -50px;}
.slide_all .minus:hover{background-position:-40px -50px;}
.slide_all .new{display:none;position:absolute;top:0;left:0;overflow:hidden;width:600px;height:280px;}
/* 焦点图 切换按钮在下
------------------------------ */
.slide_bottom{overflow:hidden;width:600px;height:280px;border:1px solid #999;background:#000;}
.slide_bottom .list{overflow:hidden;position:absolute;top:0px;left:0px;}
.slide_bottom .list li{float:left;width:600px;}
.slide_bottom .btn{overflow:hidden;position:absolute;top:0px;left:0;font-size:14px;}
.slide_bottom .btn li{float:left;width:120px;height:30px;background:url(img/btn_bg_2.png) no-repeat;text-align:center;line-height:30px;cursor:pointer;}
.slide_bottom .btn .selected{background-position:0 -30px;color:#fff;}
.slide_bottom .plus,
.slide_bottom .minus{position:absolute;top:110px;width:40px;height:50px;background-image:url(img/control.png);background-repeat:no-repeat;text-align:center;cursor:pointer;}
.slide_bottom .plus{left:0;background-position:0 0;}
.slide_bottom .minus{right:0;background-position:-40px 0;}
.slide_bottom .plus:hover{background-position:0 -50px;}
.slide_bottom .minus:hover{background-position:-40px -50px;}
.slide_bottom .old,
.slide_bottom .new{position:absolute;overflow:hidden;width:600px;height:280px;}
/* 焦点图 切换按钮在右
------------------------------ */
.slide_right{overflow:hidden;position:relative;width:780px;height:280px;padding:10px;border:1px solid #999; background:#000;}
.slide_right .list{overflow:hidden;position:absolute;top:0;left:0;}
.slide_right .btn{overflow:hidden;position:absolute;top:0;right:0;font-size:14px;}
.slide_right .btn li{width:180px;height:60px;background:url(img/btn_bg_1.png) no-repeat;text-align:center;line-height:56px;cursor:pointer;}
.slide_right .btn .selected{background-position:0 -60px;color:#fff;}
.slide_right .old,
.slide_right .new{position:absolute;top:10px;left:10px;overflow:hidden;width:600px;height:280px;}
</style>
</head>
<body>
<div id="header" class="header">
<p class="breadcrumb"><a href="../../">前端开发仓库</a> » <a href="../../jquery">jQuery插件</a> » <strong>焦点图轮换</strong></p>
</div>
<div class="content">
<h1>jQuery 焦点图轮换</h1>
<ul class="intro">
<li><em>·</em>基于jQuery v1.4.4</li>
<li><em>·</em>支持3种轮换方式</li>
<li><em>·</em>支持自定义切换事件</li>
<li><em>·</em>支持自定义渐变速度</li>
<li><em>·</em>支持自定义轮换时间</li>
</ul>
<div class="intro">
<p>注意事项：</p>
<p>1.内部会自动创建切换按钮元素，也可在外部直接创建，若外部已创建，内部将跳过此步骤；</p>
<p>2.若不需要切换按钮，可在 css 中设置 ".classname .btn{display:none}"；</p>
<p>3.展示图片未超过1张时，会隐藏切换按钮元素。</p>
</div>
<div class="intro">
<p><a class="source_download" href="version/jquery.slideshow_20111129_f7a3cf29.rar">焦点图轮换 Demo</a></p>
</div>
<h2>【示例】</h2>
<div class="example">
<!-- 焦点图 -->
<div id="slide_a" class="home_slide">
<ul class="list">
<li><a href="#1"><img src="img/slide_1.jpg"></a></li>
<li><a href="#2"><img src="img/slide_2.jpg"></a></li>
<li><a href="#3"><img src="img/slide_3.jpg"></a></li>
<li><a href="#4"><img src="img/slide_4.jpg"></a></li>
<li><a href="#5"><img src="img/slide_5.jpg"></a></li>
</ul>
</div>
</div>
<div class="example">
<h3>浏览器兼容性</h3>
<table class="browsers">
<tr>
<th width="80"><div class="ie"></div></th>
<th width="110"><div class="chrome"></div></th>
<th width="110"><div class="firefox"></div></th>
<th width="110"><div class="safari"></div></th>
<th width="110"><div class="opera"></div></th>
</tr>
<tr>
<td class="yes">IE 6+</td>
<td class="yes">Chrome 12+</td>
<td class="yes">Firefox 3.5+</td>
<td class="yes">Safari 4.0+</td>
<td class="yes">Opera 9.6+</td>
</tr>
</table>
</div>
<h2>【settings 参数说明】（可选）</h2>
<div class="intro">
<table class="manual_table table_form">
<thead>
<tr>
<th width="80">名称</th>
<th width="120">默认值</th>
<th>说明</th>
</tr>
</thead>
<tr>
<td>events</td>
<td>"click"</td>
<td>触发按钮事件的方式</td>
</tr>
<tr>
<td>type</td>
<td>"transparent"</td>
<td>轮换效果类型。可设置为："transparent"|"horizontal"|"vertical"</td>
</tr>
<tr>
<td>speed</td>
<td>800</td>
<td>切换速度（单位：毫秒）</td>
</tr>
<tr>
<td>time</td>
<td>5000</td>
<td>自动轮换间隔时间（单位：毫秒）</td>
</tr>
<tr>
<td>btn</td>
<td>true</td>
<td>是否使用数字切换按钮</td>
</tr>
<tr>
<td>plus</td>
<td>false</td>
<td>是否使用plus按钮</td>
</tr>
<tr>
<td>minus</td>
<td>false</td>
<td>是否使用minus按钮</td>
</tr>
</table>
</div>
<h2>【DOM 结构】</h2>
<div class="example">
<pre><code class="html">
<div id="element_id" class="home_slide">
<ul class="list">
<li></li>
<li></li>
...
<li></li>
</ul>
<!-- 内部自动创建的切换按钮元素 开始 -->
<ul class="btn">
<li cla
jquery实现的各种图片自动轮换效果
4星 · 超过85%的资源 需积分: 10 118 浏览量
2012-02-08
11:07:05
上传
评论
收藏 417KB RAR 举报 
jquery各种方式自动轮换.rar （16个子文件） 
slideshow js 
jquery.slideshow.js 5KB recipes.js 15KB jquery.chili-2.2.min.js 12KB jquery-1.4.4.min.js 77KB
slideshow.html 12KB css code.css 3KB base.css 6KB img control.psd 169KB
slide_1.jpg 104KB slide_3.jpg 62KB
btn_bg_1.png 2KB slide_5.jpg 68KB slide_4.jpg 62KB slide_2.jpg 55KB btn_bg_2.png 2KB control.png 4KB资源评论
wangyanmanwym2013-10-15里面只有三个，内容不多
Ancient1202013-11-27内容值得我们学习！
haohan20122013-11-27里面的有些用不了
暮春风2014-06-26里面的有些用不了
