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>

结束。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。