jquery 图片轮换

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>

 

结束。

转载于:https://www.cnblogs.com/softwaredeveloper/p/4180265.html