标签：
jquery 图片轮换
1.下载jquery.superslide.2.1.1.js (百度搜索)
2.下载Jquery-1.4.1.js（百度搜索下载）
准备工作好了，下面开始实现
3.html
<div class="lunzhuan">
<ul class="pic">
<li><a href="#"> <img src="../images/1.jpg"/></a> </li>
<li><a href="#"> <img src="../images/2.jpg"/></a> </li>
<li><a href="#"> <img src="../images/3.jpg"/></a> </li>
</ul>
<a class="Prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
<div class="num"> <ul></ul></div>
</div>
4.css样式
<style type="text/css">
body,div,ul,li
{
padding:0;
marin:0;
}
ul{list-style:none}
img{border:none}
a{blr:express(this.onFouce=this.blur()); outline:none}
.lunhuan
{
width:600px;
height:260px;
margin:0;
postion:relative;
overflow:hidden;
margin-bottom:0;
}
.lunhuan .num
{
overflow：hidden;
height:25px;
position:absolute;
bottom:12px;
left:15px;
zoom:1;
z-index:3;
}
.lunhuan .num li
{
width:25px;
height:25px;
text-height:25px;
text-aligen:center;
font-weight:400;
font-family:"微软雅黑",Arial;
color:#FFFFFF;
background:#444444;
margin-right:10px;
border-radius:50%;
cursor:pointer;
float:left;
}
.lunhuan .num li .on
{
background:#FF7700;
}
.lunhuan .prev,.lunhuan .next
{
display:none;
width:40px;
height:100px;
background:url(/images/leftRight.png) --<>这个样式的图片
position：absolute;
top:80px;
}
.lunhuan .prev
{
left:0;
}
.lunhuan .next
{
right:0;
background-position:right;
}
</style>
5.引用两个jq文件 开始写jq
<script type="text/javascript">
$(function(){
$(".lunhuan").hover(fonction(){
$(this).find(".prev,.next").fadeTo("show",0.1);
},function(){
$(this).find(".prev,.next").hide();
})
$(".prev,.next").hover(){
$(this).fadeTo("show",0.5);
},function(){
$(this).fadeTo("show",0.1);
})
$(".lunhuan").slide({titCell:".num ul", mainCell:".pic",effect:"fold",autoPlay:true,delayTime:200,autoPage:true});
});
</script>
结束。
标签：
原文地址：http://www.cnblogs.com/softwaredeveloper/p/4180265.html
