Jquery制作插件---渐隐轮播

Posted binghuazhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery制作插件---渐隐轮播相关的知识,希望对你有一定的参考价值。

 

//需求:打开网页时,每秒钟自动切换下一张图片内容。也可以用鼠标点导航按钮进行图片切换

  技术图片


 

//代码如下

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

   <script type="text/javascript" src="jquery.1.11.1.min.js"></script>

   <style type="text/css">

      *{

         margin: 0;

         padding: 0;

      }

      ul{

         list-style: none;

      }

      .container{

         width: 1000px;

         height: 400px;

         position: relative;

      }

      .wrapper{

         height: 400px;

         position: relative;

      }

      .wrapper li{

         position: absolute;

         width: 100%;

         height: 100%;

         display: none;

      }

      .wrapper .cur{

         display: block;

      }

      .wrapper a{

         display: block;

         width: 100%;

         height: 100%;

         text-decoration: none;

      }

      img{

         width: 100%;

         height: 100%;

         display: block;

      }

      .pagination{

         position: absolute;

         width: 200px;

         height: 20px;

         right: 100px;

         bottom: 30px;

      }

      .pagination li{

         float: left;

         width: 10px;

         height: 10px;

         border-radius: 50%;

         margin:0 5px;

         background-color: #000;

         border:2px solid #777;

      }

      .pagination .act{

         background-color: #fff;

      }

      .prev,.next{

         position: absolute;

         width: 41px;

         height: 67px;

         background-image: url(img/icon-slides.png);

         background-repeat: no-repeat;

         top: 166px;

      }

      .prev{

         background-position: -83px 0;

         left: 0;

 

      }

      .prev:hover{

         background-position: 0 0;

      }

      .next{

         right: 0;

         background-position: -124px 0;

      }

      .next:hover{

         background-position: -42px 0;

      }

   </style>

</head>

<body>

   <div class="container">

      <ul class="wrapper">

         <li class="cur"><a href="#"><img src="img/ban01.jpg" ></a></li>

         <li><a href="#"><img src="img/ban02.jpg" ></a></li>

         <li><a href="#"><img src="img/ban03.jpg" ></a></li>

         <li><a href="#"><img src="img/ban04.jpg" ></a></li>

         <li><a href="#"><img src="img/ban05.jpg" ></a></li>

         <li><a href="#"><img src="img/ban06.jpg" ></a></li>

         <li><a href="#"><img src="img/ban07.jpg" ></a></li>

      </ul>

      <ul class="pagination">

         <li class="act"></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

      </ul>

      <a href="#" class="prev"></a>

      <a href="#" class="next"></a>

   </div>

   <div style="margin-left: 30%;">网页轮播图效果1111111</div>

   <script type="text/javascript">

      // $(".wrapper li").eq(1).fadeIn(2000).siblings().fadeOut(2000);

      // 当前li的索引

      var index = 0;

      function changeImg(num){

         $(".wrapper li").eq(num).fadeIn().siblings().fadeOut();

         $(".pagination li").eq(num).addClass("act").siblings().removeClass("act");

      }

      // changeImg(3);

      function autoPlay(){

         if (index==6) {

            index=-1;

         }

         index++;

         changeImg(index);

      }

      var timer = setInterval(autoPlay,2000);

 

      $(".container").mouseover(function(){

         clearInterval(timer);

      }).mouseout(function(){

         timer = setInterval(autoPlay,2000);

      });

 

      $(".prev").click(function(){

         if (index==0) {

            index=7;

         }

         index--;

         changeImg(index);

      });

 

     

      $(".next").click(function(){

          autoPlay();

      });

 

      $(".pagination li").click(function(){

         var i = $(this).index();

         index = i;

         changeImg(index);

      });

   </script>

</body>

</html>

以上是关于Jquery制作插件---渐隐轮播的主要内容,如果未能解决你的问题,请参考以下文章

使用jQuery进行轮播图

前端自制Jquery插件————轮播

jQuery制作无缝轮播效果

jQuery补充,基于jQuery的bxslider轮播器插件

jQuery插件之路——轮播

五款经典jquery图片轮播插件—前端开发必备