以下是 jQuery sudoSlider插件轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(basic.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sudo Slider | Basic usage</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style>
body {
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
line-height:180%;
margin:0;
padding:0;
}
h1, h2, h3, h4, h5
{
margin: 0 0 15px 0;
padding: 0;
color: #690;
font-weight: normal;
}
h1
{
font-size: 200%;
letter-spacing: -2px
}
p
{
margin: 0 0 15px 0;
padding: 0;
line-height:21px;
}
a
{
color: #690;
text-decoration: underline;
font-weight: bold;
}
a:hover
{
color: #333;
text-decoration: none;
font-weight: bold;
}
img{
border:none;
}
pre{
margin-top:-16px;
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
width:674px;
}
body {
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
line-height:180%;
margin:0;
padding:0;
}
h1, h2, h3, h4, h5
{
margin: 0 0 15px 0;
padding: 0;
color: #690;
font-weight: normal;
}
h1
{
font-size: 200%;
letter-spacing: -2px
}
p
{
margin: 0 0 15px 0;
padding: 0;
line-height:21px;
}
a
{
color: #690;
text-decoration: underline;
font-weight: bold;
}
a:hover
{
color: #333;
text-decoration: none;
font-weight: bold;
}
img{
border:none;
}
pre{
margin-top:-16px;
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
width:674px;
}
#container {
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}
#container {
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}
/* Sudo Slider */
img{border:none;}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:696px;
overflow:hidden;
}
#slider {
width:696px;
}
/* // Sudo Slider */
</style>
<script type="Text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sudoSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").sudoSlider();
});
</script>
</head>
<body>
<div id="container">
<h1>Sudo Slider jQuery Plugin - Back to basics demo</h1>
<h2>The most basic slider you can create with this plugin.</h2>
<div style="position:relative;">
<div id="slider">
<ul>
<li><img src="images/01.jpg" alt="image description"/></li>
<li><img src="images/02.jpg" alt="image description"/></li>
<li><img src="images/03.jpg" alt="image description"/></li>
<li><img src="images/04.jpg" alt="image description"/></li>
<li><img src="images/05.jpg" alt="image description"/></li>
</ul>
</div>
</div>
<h3>Usage</h3>
<h4>This is everything you need.</h4>
<h4>First include the javascripts</h4>
<pre>
<script type="Text/Javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.sudoSlider.min.js"></script></pre>
<h4>The Javascript to start it.</h4>
<pre>
<script type="text/javascript" >
$(document).ready(function(){
$("#slider").sudoSlider();
});
</script></pre>
<h4>The CSS</h4>
<pre>
#slider {
width:696px;
}
#slider img{
border:none;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:696px;
overflow:hidden;
}</pre>
<h4>The HTML</h4>
<pre>
<div id="slider" >
<ul>
<li><img src="images/01.jpg" alt="image description"/></li>
<li><img src="images/02.jpg" alt="image description"/></li>
<li><img src="images/03.jpg" alt="image description"/></li>
<li><img src="images/04.jpg" alt="image description"/></li>
<li><img src="images/05.jpg" alt="image description"/></li>
</ul>
</div></pre>
</div>
<div style="text-align:center;clear:both">
<p><script language="javascript" src="http://www.sharejs.com/js/720.js"></script></p>
<p>来源：<a href="http://webbies.dk/SudoSlider/" target="_blank">webbies</a> 代码整理：<a href="http://www.sharejs.com/" target="_blank">脚本分享网</a> 感谢：<a href="http://www.sharejs.com" target="_blank">guifei</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery sudoSlider插件</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.sudoSlider.js"></script>
<script type="Text/Javascript" src="js/jquery.address-1.2.2.min.js"></script>
<script>
$(document).ready(function(){
$("#slider").sudoSlider({
continuous: true,
history: true,
numericText: ['1','2','3'],
customLink: 'a.tablink',
updateBefore: true,
beforeAniFunc: function(t){
$('.nextBtn').stop().fadeTo(300, 0.4);
$('.prevBtn').stop().fadeTo(300, 0.4);
},
afterAniFunc: function(t){
$('.nextBtn').stop().fadeTo(500, 1);
$('.prevBtn').stop().fadeTo(500, 1);
},
currentFunc:function(t){
$(this).stop().animate({
fontSize: '19'
}, 400);
},
uncurrentFunc:function(t){
$(this).stop().animate({
fontSize: '15'
}, 400);
}/* */
});
$(".showoff").sudoSlider({
numeric:false,
customLink:'a.customLink',
prevNext:false
});
$('button.clickbuttonclass').click(function() {
// Here i do some check, to see if the content is valid.
var value = false;
$('input#someID').each(function() {
value = $(this).val();
});
if (value)
{
$(".showoff").sudoSlider('next');
}
else
{
alert('Put something in the text-field plz :p');
}
});
});
</script>
</head>
<body>
<div id="container" style="position:relative;">
<div class="topsy_widget_data" style="position:absolute;top:3px;left:270px;"></div>
<h1 style="margin-top:20px;">Sudo Slider jQuery Plugin<p style="font-size:60%;letter-spacing:1px;">Freedom to the designer</p></h1><br />
<div id="wrapper">
<div class="tab"><h3 class="tabtxt"><a href="#" class="tablink" rel="1">Overwiew</a></h3></div>
<div class="tab"><h3 class="tabtxt"><a href="#" class="tablink" rel="2">See it</a></h3></div>
<div class="tab"><h3 class="tabtxt"><a href="#" class="tablink" rel="3">Get it</a></h3></div>
<div class="tab lasttab"><h3 class="tabtxt"><a href="#" class="tablink" rel="4">Docs</a></h3></div>
<div class="boxholder">
<div class="box">
<div id="slider" class="slider2">
<ul class="sliderul">
<li class="sliderli">
<div class="slide">
<h2>Sudo Slider jQuery plugin</h2>
<p>Essentially, Sudo Slider is the slider plugin that allows the designer to do whatever he wants, with whatever HTML he want. </p>
<h3 style="margin-left:7px;">Features</h3>
<ul>
<li>
Complete freedom to choose your HTML. Only restriction is that the slider is built from an unordered list.
</li>
<li>
Sudo Slider can <a href="demo.html#slide8">load images and html with Ajax</a>
</li>
<li>
Degrades nicely if no JavaScript. (Unless AJAX is used).
</li>
<li>
<a href="demo.html">Multiple sliders pr. page</a>.
</li>
<li>
Choose between a <a href="demo.html#slide1">normal slide animation</a>, or a <a href="demo.html#slide3">fade animation</a>.
</li>
<li>
<a href="demo.html#slide6">Bookmark and browser forward/back button support. </a>
</li>
<li>
Do almost anything you can imagine a slider doing.
</li>
<li>
Fully supports IE6+, FF, Chrome, Opera, Safari etc.
</li>
<li>
Handle any html inside the slides (<a href="javascript:void(0);" class="customLink" rel="2">images</a>, <a href="javascript:void(0);" class="customLink" rel="3">text</a>, <a href="javascript:void(0);" class="customLink" rel="4">flash-videos</a>, <a href="javascript:void(0);" class="customLink" rel="5">a form (with validation)</a> etc.)
</li>
<li>
<a href="demo.html#slide11">Slide automatically</a>, turning it into a "slideshow".
</li>
<li>
It's <a href="basic.html">easy to set up</a>, and even easier to customize.
</li>
<li>
It can slide <a href="demo.html#slide4">continuously</a>, meaning that it goes in a loop if you keep sliding in one direction.
</li>
<li>
Only 10KB minified
</li>
</ul>
</div>
</li>
<li class="sliderli">
<div class="slide">
<h2>Demonstrations</h2>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/basic.png" alt="basic"/>
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="basic.html">The most basic slider possible using Sudo Slider.</a>
</div>
</div>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/basic_ajax.png" alt="basic ajax"/>
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="basic_ajax.html">The very basics of Ajax loaded content using Sudo Slider.</a>
</div>
</div>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/full.png" alt="basic ajax"/>
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="demo.html">17 sliders on one page, showing off most of the features.</a>
</div>
</div>
</div>
</li>
<li class="sliderli">
<div class="slide">
<h2>Downloads</h2>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/download.png" width="48" alt="download" />
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="Sudo Slider 1.0.7.zip">Download the full package (1.0.7)</a>
</div>
</div>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/js.png" width="48" alt="download" />
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="js/jquery.sudoSlider.min.js">Download the JavaScript minified 10KB (1.0.7)</a>
</div>
</div>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/js.png" width="48" alt="download" />
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="js/jquery.sudoSlider.js">Download the JavaScript development version 33KB (1.0.7)</a>
</div>
</div>
<h1 style="margin-top:10px;">Keep the project alive, donate!</h1>
<form action="http://13141618.taobao.com" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/da_DK/i/scr/pixel.gif" width="1" height="1">
</form><br />
<h1>Release notes:</h1>
<h2>Modifications and fixes since 1.0</h2>
<h3 style="margin-bottom:-7px;">1.0.1:</h3>
Bug fix: Fixed crossfade for IE6 + IE7 (didn't accept position:absolute, unless there's a top:0 and left:0 with it).
<h3 style="margin-bottom:-7px;">1.0.2:</h3>
Change in docs: Fixed some links that were wrong in index.html.
<h3 style="margin-bottom:-7px;">1.0.3:</h3>
Bug fix: Fixed last slide not loading if using ajax and continuous. <br />
Change in Javascript: when CustomLinks fade away, their children doesn't anymore. <br />
Change in docs: now using Jquery Address 1.2.2 in demo instead of 1.1 (no change of code. ).
<h3 style="margin-bottom:-7px;">1.0.4:</h3>
Bug fix: Fixed beforeAniFunc not executing on a "continuous clone". <br />
Change in docs: Added captions demo. <br />
Added feature: Made the script change "position" to "relative" if fade is enabled (and the position is it's default value ("static")). <br />
Change in Javascript: The html of the previous button is now positioned before the html of the next button.
<h3 style="margin-bottom:-7px;">1.0.5:</h3>
Change in docs: Added link to http://plugins.jquery.com/project/SudoSlider in the "Docs" tap in index.html, that's now the official way to report a bug. <br />
Added feature: Added a "destroy" action.
<h3 style="margin-bottom:-7px;">1.0.6:</h3>
Bug fix: Fixed customLinks and first/last buttons fading out when continuous:true. <br />
The 'destroy' action now also removes all click bindings on the customLinks.
<h3 style="margin-bottom:-7px;">1.0.7:</h3>
Bug fix: Fixed content visible (that shouldn't be it) in IE6 and IE7. (Bug introduced in 1.0.4)
</div>
</li>
<li class="sliderli">
<div class="slide">
<h2>Documentation</h2>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/howto.png" width="48" alt="download" />
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="howto.html">How to use Sudo Slider</a>
</div>
</div>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/setting.png" width="48" alt="download" />
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="settings.html">The different settings</a>
</div>
</div>
<div style="float:left;height:48px;width:100%;margin-bottom:10px;">
<div style="float:left;height:48px;">
<img src="images/designers guide.png" width="48" alt="download" />
</div>
<div style="float:left;height:48px;position:relative;top:11px;text-decoration:none;margin-left:5px;">
<a href="designers guide.html">Designers guide to Sudo Slider</a>
</div>
</div>
<h1>Support and bug reports</h1>
You would be very helpfull if you submit any bug-report or support-request here
</div>
</li>
</ul>
</div>
</div>
</div>
<br />
</div>
</div>
</body>
</html>JS代码(jquery.color.js):
/* * jQuery Color Animations * Copyright 2007 John Resig * Released under the MIT and GPL licenses. */
(function(jQuery){
// We override the animation for all of these color stylesjQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){
jQuery.fx.step[attr] = function(fx){
if ( fx.state == 0 ){
fx.start = getColor( fx.elem,attr );
fx.end = getRGB( fx.end );
}
fx.elem.style[attr] = "rgb(" + [Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]),255),0),Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]),255),0)].join(",") + ")";
}
}
);
// Color Conversion functions from highlightFade// By Blair Mitchelmore// http://jquery.offput.ca/highlightFade/// Parse strings looking for color tuples [255,255,255]function getRGB(color){
var result;
// Check if we're already dealing with an array of colorsif ( color && color.constructor == Array && color.length == 3 )return color;
// Look for rgb(num,num,num)if (result = /rgb\(\s*([0-9]{
1,3}
)\s*,\s*([0-9]{
1,3}
)\s*,\s*([0-9]{
1,3}
)\s*\)/.exec(color))return [parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];
// Look for rgb(num%,num%,num%)if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))return [parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];
// Look for #a0b1c2if (result = /#([a-fA-F0-9]{
2}
)([a-fA-F0-9]{
2}
)([a-fA-F0-9]{
2}
)/.exec(color))return [parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];
// Look for #fffif (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))return [parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];
// Otherwise,we're most likely dealing with a named colorreturn colors[jQuery.trim(color).toLowerCase()];
}
function getColor(elem,attr){
var color;
do{
color = jQuery.curCSS(elem,attr);
// Keep going until we find an element that has color,or we hit the bodyif ( color != '' && color != 'transparent' || jQuery.nodeName(elem,"body") )break;
attr = "backgroundColor";
}
while ( elem = elem.parentNode );
return getRGB(color);
}
;
// Some named colors to work with// From Interface by Stefan Petre// http://interface.eyecon.ro/var colors ={
aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}
;
}
)(jQuery);
CSS代码(style.css):
/* Sudo Slider */
.slider ul,.slider ul li,.sliderul,.sliderli{margin:0;padding:0;list-style:none;overflow:hidden;}
.slider ul li,.sliderli{/*define width and height of list item (slide)entire slider area will adjust according to the parameters provided herecomment the height out,if autoheight is on.*/
width:696px;/*height:241px;*/
overflow:hidden;}
.slider,.slider2{width:696px;overflow:hidden;}
.graphic,.prevBtn,.nextBtn{margin:0;padding:0;display:block;overflow:hidden;text-indent:-8000px;}
.prevBtn,.nextBtn{display:block;width:30px;height:77px;position:absolute;left:-30px;top:71px;z-index:1000;background:url(../images/btn_prev.gif) no-repeat 0 0;cursor:pointer;}
.nextBtn{left:696px;}
.nextBtn{background:url(../images/btn_next.gif) no-repeat 0 0;}
#wrapper .prevBtn{left:-35px;}
/* numeric controls */
ol{margin:1em 0;padding:0;height:28px;}
ol li{margin:0 10px 0 0;padding:0;float:left;list-style:none;height:28px;line-height:28px;}
ol li a{float:left;height:28px;line-height:28px;border:1px solid #ccc;background:#DAF3F8;color:#555;padding:0 10px;text-decoration:none;}
ol li.current a{background:#5DC9E1;color:#fff;}
ol li a:focus,.prevBtn a:focus,.nextBtn a:focus{outline:none;}
/* // Sudo Slider */
body{font:80% Trebuchet MS,Arial,Helvetica,Sans-Serif;color:#333;line-height:180%;margin:0;padding:0;}
h1,h2,h3,h4,h5{margin:0 0 15px 0;padding:0;color:#690;font-weight:normal;}
h1{font-size:200%;letter-spacing:-2px}
p{margin:0 0 15px 0;padding:0;line-height:21px;}
a{color:#690;text-decoration:underline;font-weight:bold;}
a:hover{color:#333;text-decoration:none;font-weight:bold;}
img{border:none;}
pre{margin-top:-16px;display:block;font:12px "Courier New",Courier,monospace;padding:10px;border:1px solid #bae2f0;background:#e3f4f9;width:674px;}
.graphic,.prevBtn,.nextBtn{margin:0;padding:0;display:block;overflow:hidden;text-indent:-8000px;}
#container{margin:0 auto;position:relative;text-align:left;width:696px;background:#fff;margin-bottom:2em;}
#header{line-height:80px;}
#content{position:relative;}
#simplemodal-overlay{background-color:#000;cursor:wait;}
/* Container */
#simplemodal-container{color:#bbb;background-color:#333;border:4px solid #444;}
#simplemodal-container a.modalCloseImg{background:url(../images/x.png) no-repeat top right;width:100%;height:100%;display:inline;z-index:3200;position:absolute;top:-15px;right:-16px;cursor:pointer;}
/* Tabs */
div.tabs{height:30px;width:696px;margin-bottom:-6px;}
.tabs a div.tabbox{float:left;width:230px;border:1px solid gray;background:lightblue;text-align:center;}
.tabs a{color:black;text-decoration:none;cursor:pointer;}
.tabs a.current{text-decoration:underline;}
.tabs a.current div.tabbox{border-bottom:none;}
/* // Sudo Slider */
#slider15 li{width:350px;}
.slide15container .prevBtn,.slide15container .nextBtn{top:21px;}
.caption{position:absolute;bottom:0;left:0;width:700px;height:25px;text-align:center;color:black;background:white;background:transparent;background:rgba(255,255,255,0.7);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff);/* I just hate IE,but this works */
zoom:1;/* Part of the IE fix */
}
/* The tabs in the index.html page */
div.tabs{height:30px;width:696px;margin-bottom:-6px;}
.tabs a div.tabbox{float:left;width:230px;border:1px solid gray;background:lightblue;text-align:center;}
.tabs a{color:black;text-decoration:none;cursor:pointer;}
.tabs a.current{text-decoration:underline;}
.tabs a.current div.tabbox{border-bottom:none;}
/* // Sudo Slider */
#wrapper{width:701px;margin:0 auto;}
.box{background:#fff;width:692px;position:relative;}
.slide{margin:10px;}
.boxholder{clear:both;padding:5px;background:#8DC70B;}
.tab{float:left;height:32px;width:140px;margin:0 47px 0 0;text-align:center;background:#8DC70B url(../images/tab.jpg) no-repeat;}
.lasttab{margin:0;}
.tabtxt{margin:0;color:#fff;font-size:12px;font-weight:bold;padding:9px 0 0 0;}
#wrapper .tab a{font-size:15px;color:#fff;text-decoration:none;}
#wrapper .tab a:hover{color:#DFE44F;}
#wrapper .tab a.current{text-decoration:underline;}
.showoff{width:696px;position:relative;/* Fixing fade in IE6 and IE7 */
}
.showoff img{border:none;}
.showoff ul,.showoff li{margin:0;padding:0;list-style:none;}
.showoff li{width:696px;overflow:hidden;}
分享到QQ
分享到微博
微信扫一扫
