如何使用jQuery实现简单轮播效果

时间：2024-03-26 17:23:44

如何使用jQuery实现简单轮播效果

如何使用jQuery实现简单的轮播效果，事例如下：

  1. 在Htlm中封装一个大盒子为cont（可以自行定义类名），其中放置2个类名分别为con(可以自行定义类名)、hd（jQery特定的小图标类名，不能随意改变）的小盒子，使用ul li 标签，并且在con的盒子里分别在每个li标签中放置一个img标签，并且在ul外面放置2个a标签，并分别给予prev，next这2个jQery特定的前进和后退标签。代码如下：

     <div class="cont">
  <div class="con">
   <ul>
   <li>
     <img src="img/_20181219071050.jpg" alt="">
   </li>
   <li>
    <img src="img/_20181219071058.jpg" alt="">
   </li>
   <li>
    <img src="img/_20181219071109.jpg" alt="">
   </li>
   <li>
     <img src="img/_20181219071207.jpg" alt="">
   </li>
   <li>
    <img src="img/_20181219071233.jpg" alt="">
   </li>
  </ul> 
   <a href="javascript:;" class="prev"></a>
   <a href="javascript:;" class="next"></a>
 </div>
 <div class="hd">
  <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>
</div>

  2. 在上面代码下方引入jQuery代码

      <script src="js/jquery1.42.min.js"></script>
  <script src="js/jquery.SuperSlide.2.1.1.js"></script>

  3. 给予cont里面的所有元素样式

    .cont{
 margin: 0px auto;
 position: relative;
 width: 640px;
}
.cont .con{
 width: 640px;
 height: 400px;
 position: relative;
}
.cont .con img{
 height: 400px;
 width: 640px;
}
.cont .hd{
 width: 150px;
 height: 25px;
 position: absolute;
 top: 345px;
 left: 76%;
} 
.hd li{
 display: block;
 width: 10px;
 height: 10px;
 margin-right: 10px; 
 float: left;
 border-radius: 10px;
 border: 1px solid #fff;
 cursor:pointer; 
}
ul{
 list-style: none;
}
.hd .on{
 background: #fff;
}
.cont .next{
 background: url(./img/icon-header.png)-112px -12px;
 width: 56px;
 height: 56px;
 position: absolute;
 top: 204px;
 right: -82px;
}
.cont .next:hover{
 background: url(./img/icon-header.png)-192px -12px;
}
.cont .prev{
 background: url(./img/icon-header.png)-352px -12px;
 width: 56px;
 height: 56px;
 position: absolute;
 top: 204px;
 left: -79px;
}
.cont .prev:hover{
 background: url(./img/icon-header.png)-272px -12px;
}

  4. 单纯的引入jQuery代码当然是无法达到目标效果，必须调用代码

    <script type="text/javascript"> 
  jQuery(".cont").slide({
   mainCell:".con ul",
   autoPlay:true,
   effect:"fold",
   interTime:1000,
   easing:"easeOutCirc"
  }); 
</script>

  5. 此时当你打开页面时，就会发现轮播已经完成了，并且缩放不会使其样式混乱

如何使用jQuery实现简单轮播效果

相关文章