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>
结束。