教你一步步用jQyery实现轮播器

实现原理

如图，试想一下，若是将

的width属性值设置的很宽，直到可以装下你所有的图片，而每一个图片又用
• 包着并且设置了左浮动。

  那么当我们向左移动ul的时候并且移动的距离为

• 的宽度，第二个
• 不就被移动到了
  的窗口，这样一来图片不就被一张一张显示出来了吗？

  接下来我们在设置

  的属性overflow:hidden，那么

  窗口以外的图片不显示，只显示移动到当前窗口的图片，是不是又完美了一些，感觉快做好了是吧！

  

  说了一些原理，好了，直接上代码，记得引入jquery。

  这是div做的布局，做的时候记得加上边框，做后在删掉，这样便于测试

  <div class="slideShow">
   <div class="nav-t">
    <ul>
     <li><a href="#" target="_blank"><img src="images/1.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/2.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/3.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/4.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/5.png" alt=""></a></li>
    </ul>
    <div class="nav-b">
     <span class="active">1</span>
     <span>2</span>
     <span>3</span>
     <span>4</span>
     <span>5</span>
    </div>
   </div>
   </div>
   <script type="text/javascript" src="jquery-min.js"></script>
   <script type="text/javascript" src="lunbo.js"></script>

  Salin selepas log masuk

  接下来设置一下样式

  <style>
   .slideShow{
    border:0px solid blue;
    width:600px;
    height:450px;
    margin:50px auto;
    position:relative;
   }
   .nav-t{
    border:0px solid red;
    width:580px;
    height:430px;
    margin:8px auto;
    position:relative;
    overflow:hidden;
   }
   .nav-t ul{
    border:0px solid green;
    list-style:none;
    width:3000px;
    height:430px;
    margin:0;
    padding:0;
    position:relative;
   }
   .nav-t li{
    height:427px;
    width:580px;
    float:left;
   }
   .nav-b{
    position:absolute;
    top:390px;
    left:220px;
    cursor:default;
   }
   .nav-b span{
    margin-right:5px;
    border:1px solid red;
    padding:0 6px;
    border-radius:12px;
    color:#fff;
    background:rgba(132,125,119,0.5);
    cursor:pointer;
   }
   .nav-b span.active{
    background:rgba(0,0,0,0.8);
   }
   </style>

  Salin selepas log masuk

  用js实现点击轮播图片、自动轮播图片，鼠标移动上去停止轮播

  $(function(){
    
   $(function(){
   var slide=$(".slideShow"),
    navt=slide.find(".nav-t"),
    ul=navt.find("ul"),
    navbs=slide.find(".nav-b span"),
    onwidth=ul.find("li").eq(0).width(), //获取ul下的li宽度
    timer=null,
    inow=0;
   navt.hover(function(){
     clearInterval(timer); //鼠标移上去，清除掉自动轮播功能，即定时轮播
    },autoPlay); 
   navbs.on("click",function(){ //点击轮播事件
    var me=$(this);
     inow=me.index();  //此处变量用的与自动轮播函数里的相同，为的是能在随便点击后，自动轮播时按照我们点击了的继续向后轮播，这叫动态实时
    ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到div的当前窗口
    navbs.removeClass("active");   //清除掉上一个点击按钮的样式
    me.addClass("active");     //为当前被点击的按钮添加第一个按钮样式
   });
   autoPlay();     
   function autoPlay(){     //自动轮播函数
   timer=setInterval(function(){   //开定时器
    inow++;
    if(inow==navbs.length){    //判断是否到了最后一张，若是到了，返回到第一张
     inow=0
     }
    navbs.eq(inow).trigger("click"); //根据定时的时间用span的索引自动调用click事件，trigger为jQuery的自动调用函数
    },3000);
   }
   
  });
   
   
   
  });

  Salin selepas log masuk

  看一下效果图？好的

  

  

  总结

  好了，以上就是利用jQyery实现轮播器的全部内容了，怎么样，要不你也做一个？希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

  更多教你一步步用jQyery实现轮播器相关文章请关注PHP中文网！

  
  

  Label berkaitan：

  jquery 轮播

  sumber：php.cn

  Artikel sebelumnya：jquery广告无缝轮播实例 Artikel seterusnya：JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

  Kenyataan Laman Web ini

  Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

  Artikel terbaru oleh pengarang

  • html设置加粗、倾斜、下划线、删除线等字体效果示例介绍
    1970-01-01 08:00:00
  • 实现一个 Java 版的 Redis
    1970-01-01 08:00:00
  • 最简单的微信小程序Demo
    1970-01-01 08:00:00
  • python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍
    1970-01-01 08:00:00
  • 微信小程序：如何实现tabs选项卡效果示例
    1970-01-01 08:00:00
  • Python构造自定义方法来美化字典结构输出
    1970-01-01 08:00:00
  • HTML5:使用Canvas实时处理Video
    1970-01-01 08:00:00
  • Asp.net使用SignalR实现发送图片
    1970-01-01 08:00:00
  • 微信小程序开发教程-App()和Page()函数概述
    1970-01-01 08:00:00
  • 详解python redis使用方法
    1970-01-01 08:00:00

  Isu terkini

  function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

  daripada 2024-04-29 11:01:01

  0

  3

  2433

  Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

  daripada 2024-04-23 00:22:19

  0

  11

  2564

  Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

  daripada 2024-04-19 15:37:47

  0

  1

  2169

  Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

  daripada 2024-04-18 23:52:34

  0

  1

  2047

  Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

  daripada 2024-04-16 10:10:18

  0

  0

  2148

  Topik-topik yang berkaitan

  Lagi>

  • Kaedah pengekodan biasa
  • Pembayaran tanpa kata laluan Taobao
  • kes apabila penggunaan sql
  • Apakah yang perlu saya lakukan jika cakera sementara ps penuh?
  • Bagaimana untuk memulihkan data dari cakera keras mudah alih
  • Apakah yang berlaku apabila alamat ip tidak tersedia?
  • Belajar sendiri untuk pemula dalam bahasa C dengan asas sifar
  • tingkap.prompt