一个s3slider实例

最新推荐文章于 2025-08-12 17:22:56 发布

原创最新推荐文章于 2025-08-12 17:22:56 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #image #safari #mozilla #firefox #opera

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

这个博客展示了如何使用s3Slider JavaScript插件创建一个图片轮播效果。提供了不同配置的三个示例，包括时间间隔设置。适用于Firefox, Safari, Mozilla, Opera等浏览器。" 84735434,8103014,MyBatis配置文件实时更新与重载技巧,"['Java', 'MyBatis', '数据库开发', '配置管理', '开发工具']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示页: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"></mce:script> <title>s3Slider</title> <mce:style type="text/css"></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> <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> <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> </body> </html>