效果展示页:http://www.serie3.info/s3slider/demonstration.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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript" src="js/s3Slider.js" mce_src="js/s3Slider.js"></mce:script> <mce:script type="text/javascript"><!-- $(function(){ $('#slide').s3Slider({ timeOut:3000 }); $('#slide1').s3Slider({ timeOut:4000 }); $('#slide2').s3Slider({ timeOut:5000 }); }) // --></mce:script> <title>s3Slider</title> <mce:style type="text/css"><!-- body,div,span{margin:0; padding:0;} ul, li{list-style:none; padding:0; margin:0;} #slide,#slide1,#slide2{width:410px; height:300px; float:left; margin:5px; position:relative; overflow:hidden;} #slideContent, #slide1Content, #slide2Content {width:410px; height:300px; position:absolute; top:0; margin-left:0;} .slideImage,.slide1Image,.slide2Image{ float:left; position:relative; height:300px; display:none;} .slideImage span{ position:absolute; left:0; bottom:0; font: 10px/15px Arial, Helvetica, sans-serif; padding:10px; width:390px; background:#000; color:#FFF; display:none; filter:alpha(opacity=70); /* IE6专用 值是 0-100 */ opacity:0.7; /* css标准 支持 firefox Opera Safari */ -moz-opacity:0.7; /* 支持一些老版本的 Mozilla */ -khtml-opacity:0.7; /* 支持一些老版本的 Safari */ } .slide1Image span,.slide2Image span{ position:absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding:10px; width:390px; background:#000; color:#FFF; display:none; filter:alpha(opacity=70); /* IE6专用 值是 0-100 */ opacity:0.7; /* css标准 支持 firefox Opera Safari */ -moz-opacity:0.7; /* 支持一些老版本的 Mozilla */ -khtml-opacity:0.7; /* 支持一些老版本的 Safari */ } .top{left:0; top:0;} .bottom{left:0; bottom:0;} .left{left:0; top:0; width:100px !important; height:280px; } .right{right:0; bottom:0; width:100px !important; height:280px; _height:284px;} --></mce:style><style type="text/css" mce_bogus="1">body,div,span{margin:0; padding:0;} ul, li{list-style:none; padding:0; margin:0;} #slide,#slide1,#slide2{width:410px; height:300px; float:left; margin:5px; position:relative; overflow:hidden;} #slideContent, #slide1Content, #slide2Content {width:410px; height:300px; position:absolute; top:0; margin-left:0;} .slideImage,.slide1Image,.slide2Image{ float:left; position:relative; height:300px; display:none;} .slideImage span{ position:absolute; left:0; bottom:0; font: 10px/15px Arial, Helvetica, sans-serif; padding:10px; width:390px; background:#000; color:#FFF; display:none; filter:alpha(opacity=70); /* IE6专用 值是 0-100 */ opacity:0.7; /* css标准 支持 firefox Opera Safari */ -moz-opacity:0.7; /* 支持一些老版本的 Mozilla */ -khtml-opacity:0.7; /* 支持一些老版本的 Safari */ } .slide1Image span,.slide2Image span{ position:absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding:10px; width:390px; background:#000; color:#FFF; display:none; filter:alpha(opacity=70); /* IE6专用 值是 0-100 */ opacity:0.7; /* css标准 支持 firefox Opera Safari */ -moz-opacity:0.7; /* 支持一些老版本的 Mozilla */ -khtml-opacity:0.7; /* 支持一些老版本的 Safari */ } .top{left:0; top:0;} .bottom{left:0; bottom:0;} .left{left:0; top:0; width:100px !important; height:280px; } .right{right:0; bottom:0; width:100px !important; height:280px; _height:284px;}</style> </head> <body> <div id="slide"> <ul id="slideContent"> <li class="slideImage"> <img src="images/1.jpg" mce_src="images/1.jpg" /> <span>images1 info</span> </li> <li class="slideImage"> <img src="images/2.jpg" mce_src="images/2.jpg" /> <span>images2 info</span> </li> <li class="slideImage"> <img src="images/3.jpg" mce_src="images/3.jpg" /> <span>images3 info</span> </li> <li class="slideImage"> <img src="images/4.jpg" mce_src="images/4.jpg" /> <span >images4 info</span> </li> <li class="slideImage"> <img src="images/5.jpg" mce_src="images/5.jpg" /> <span>images5 info</span> </li> </ul> </div><!-- slider end --> <div id="slide1"> <ul id="slide1Content"> <li class="slide1Image"> <img src="images/1.jpg" mce_src="images/1.jpg" /> <span class="left">images1 info</span> </li> <li class="slide1Image"> <img src="images/2.jpg" mce_src="images/2.jpg" /> <span class="right">images2 info</span> </li> <li class="slide1Image"> <img src="images/3.jpg" mce_src="images/3.jpg" /> <span class="left">images3 info</span> </li> <li class="slide1Image"> <img src="images/4.jpg" mce_src="images/4.jpg" /> <span class="right">images4 info</span> </li> <li class="slide1Image"> <img src="images/5.jpg" mce_src="images/5.jpg" /> <span class="left">images5 info</span> </li> </ul> </div><!-- slider1 end --> <div id="slide2"> <ul id="slide2Content"> <li class="slide2Image"> <img src="images/1.jpg" mce_src="images/1.jpg" /> <span class="top">images1 info</span> </li> <li class="slide2Image"> <img src="images/2.jpg" mce_src="images/2.jpg" /> <span class="bottom">images2 info</span> </li> <li class="slide2Image"> <img src="images/3.jpg" mce_src="images/3.jpg" /> <span class="left">images3 info</span> </li> <li class="slide2Image"> <img src="images/4.jpg" mce_src="images/4.jpg" /> <span class="right">images4 info</span> </li> <li class="slide2Image"> <img src="images/5.jpg" mce_src="images/5.jpg" /> <span class="bottom">images5 info</span> </li> </ul> </div><!-- slider2 end --> </body> </html>