基于jquery实现的slider特效
<wbr></wbr>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
$(function(){
$('#slide').s3Slider({
timeOut:3000
});
$('#slide1').s3Slider({
timeOut:4000
});
$('#slide2').s3Slider({
timeOut:5000
});
})
</script>
<title>s3Slider</title>
<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;}
</style>
</head>
<body>
<div id="slide">
<ul id="slideContent">
<li class="slideImage">
<img src="images/1.jpg" />
<span>images1 info</span>
</li>
<li class="slideImage">
<img src="images/2.jpg" />
<span>images2 info</span>
</li>
<li class="slideImage">
<img src="images/3.jpg" />
<span>images3 info</span>
</li>
<li class="slideImage">
<img src="images/4.jpg" />
<span >images4 info</span>
</li>
<li class="slideImage">
<img 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" />
<span class="left">images1 info</span>
</li>
<li class="slide1Image">
<img src="images/2.jpg" />
<span class="right">images2 info</span>
</li>
<li class="slide1Image">
<img src="images/3.jpg" />
<span class="left">images3 info</span>
</li>
<li class="slide1Image">
<img src="images/4.jpg" />
<span class="right">images4 info</span>
</li>
<li class="slide1Image">
<img 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" />
<span class="top">images1 info</span>
</li>
<li class="slide2Image">
<img src="images/2.jpg" />
<span class="bottom">images2 info</span>
</li>
<li class="slide2Image">
<img src="images/3.jpg" />
<span class="left">images3 info</span>
</li>
<li class="slide2Image">
<img src="images/4.jpg" />
<span class="right">images4 info</span>
</li>
<li class="slide2Image">
<img src="images/5.jpg" />
<span class="bottom">images5 info</span>
</li>
</ul>
</div><!-- slider2 end -->
</body>
</html>
<wbr></wbr>