一个s3slider实例
效果展示页: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>
页:
[1]