如何使用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实现简单轮播效果