Article Sujet apprentissage Télécharger Questions et réponses Dictionnaire de programmation Jeu mises à jour récentes

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Maison > interface Web > js tutoriel > le corps du texte

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

高洛峰

Libérer： 2017-01-07 13:10:27

original

1748 Les gens l'ont consulté

实现原理

如图，试想一下，若是将

包着并且设置了左浮动。

那么当我们向左移动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>
Copier après la connexion
接下来设置一下样式
<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>
Copier après la connexion
用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); } }); });
Copier après la connexion
看一下效果图？好的

总结

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

更多教你一步步用jQyery实现轮播器相关文章请关注PHP中文网！
Étiquettes associées：
jquery 轮播

source：php.cn

Article précédent：jquery广告无缝轮播实例 Article suivant：JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
- 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
Derniers numéros

Emplacements de portée Vue 3/Nuxt 3 avec des types de données génériques déduits des accessoires Je souhaite implémenter un composant carrousel dans Nuxtv3. Ce composant reçoit une liste ...

Depuis 2023-11-02 21:59:05

0

1

357

Comment rendre les images d'en-tête, le texte et les boutons réactifs Je crée un site Web en utilisant Bootstrap5. Dans l'en-tête du site Web, j'utilise le carr...

Depuis 2023-09-17 09:51:15

0

1

283

Comment ajouter l'attribut href aux éléments du carrousel dans Vuetify 2 ? J'utilise Vuetify2 et je dois rediriger l'utilisateur vers un site Web lorsqu'il clique su...

Depuis 2023-09-16 20:47:32

0

1

287

**TemplateSyntaxError dans /shop/** Impossible d'analyser la partie restante : ' du produit Le lien suivant est le lien essentiel de mon index.html https://gist.github.com/MahdinOhi/...

Depuis 2023-09-15 16:44:57

0

1

261

PHP <form method="post"> sur plusieurs diapositives de carrousel Excuse : je crée une page d'accueil avec un carrousel. Les carrousels fonctionnent très bi...

Depuis 2023-09-15 14:13:53

0

1

248
Rubriques connexes
Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

À propos de nous Clause de non-responsabilité Sitemap: Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！