Maison interface Web js tutoriel Résumez l'exemple de didacticiel d'utilisation de Require.js pour encapsuler le graphique carrousel js natif

Résumez l'exemple de didacticiel d'utilisation de Require.js pour encapsuler le graphique carrousel js natif

Jun 17, 2017 am 10:39 AM
javascript 原生 实例 封装 总结

Cet article présente principalement le code d'implémentation de l'utilisation de Require.js pour encapsuler le graphique carrousel js natif. Les amis qui en ont besoin peuvent se référer à la page

index.html :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>require.js封装轮播图</title>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #banner{
    width: 830px;
    height: 440px;
    border: solid 1px;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
  }
  #banner ul{
    position: absolute;
    left: 0;
    top: 0;
  }
  #banner ul li{
    width: 830px;
    height: 440px;
    float: left;
  }
  #banner p{
    position: absolute;
    left: 50%;
    bottom: 10px;
    margin-left: -30px;
  }
  #banner p span{
    display: block;
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    background: #ccc;
    border-radius: 50%;
  }
  #banner p .on{
    background: red;
  }
</style>
<script type="text/javascript" src="require.js" data-main=&#39;init&#39;></script>
<!--<script type="text/javascript">
  require([&#39;slider&#39;],function(mod){
  mod.slide()
})
</script>-->
</head>
<body>
  <p id="banner">
    <ul>
      <li><img src="images/1.jpg"/></li>
      <li><img src="images/2.jpg"/></li>
    </ul>
    <p>
      <span class="on"></span>
      <span></span>
      <span></span>
    </p>
  </p>
</body>
</html>
Copier après la connexion
Le code get.js est le suivant :


define(function(require,exports,module){
  exports.getStyle = function (obj,name){
    if(obj.currentStyle){
      return obj.currentStyle[name];
    }else{
      return getComputedStyle(obj,false)[name];
    };
  };
});
Copier après la connexion
Le code init.js est le suivant suit


require([&#39;slider&#39;],function(mod){
  mod.slide();
});
Copier après la connexion
le code slider.js est le suivant


define(function(require, exports, module) {
  var move = require(&#39;StartMove&#39;);
  var aBtn = document.getElementById(&#39;banner&#39;).getElementsByTagName(&#39;span&#39;);
  var oUl = document.getElementById(&#39;banner&#39;).getElementsByTagName(&#39;ul&#39;)[0];
  var aLi = oUl.children;
  //三张图片所占的宽度,length返回的是字符串中的字符数
    oUl.style.width = aLi.length * aLi[0].offsetWidth + &#39;px&#39;;
    exports.slide = function() {
      for(var i = 0; i < aBtn.length; i++) {
        aBtn[i].index = i;
        aBtn[i].onclick = function() {
          for(var i = 0; i < aBtn.length; i++) {
            aBtn[i].className = &#39;&#39;;
          }
        aBtn[this.index].className = &#39;on&#39;;
          move.move(oUl, {
          left: -this.index * aLi[0].offsetWidth;
        });
      };
    };
  };
});
Copier après la connexion
Le code StartMove.js est le suivant suit


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Résumer l'utilisation de la fonction system() dans le système Linux Résumer l'utilisation de la fonction system() dans le système Linux Feb 23, 2024 pm 06:45 PM

Résumé de la fonction system() sous Linux Dans le système Linux, la fonction system() est une fonction très couramment utilisée, qui permet d'exécuter des commandes en ligne de commande. Cet article présentera la fonction system() en détail et fournira quelques exemples de code spécifiques. 1. Utilisation de base de la fonction system(). La déclaration de la fonction system() est la suivante : intsystem(constchar*command) où le paramètre de commande est un caractère.

TrendForce : les produits de la plate-forme Blackwell de Nvidia permettent d'augmenter la capacité de production CoWoS de TSMC de 150 % cette année TrendForce : les produits de la plate-forme Blackwell de Nvidia permettent d'augmenter la capacité de production CoWoS de TSMC de 150 % cette année Apr 17, 2024 pm 08:00 PM

Selon les informations de ce site du 17 avril, TrendForce a récemment publié un rapport estimant que la demande pour les nouveaux produits de la plate-forme Blackwell de Nvidia est haussière et devrait entraîner une augmentation de la capacité totale de production d'emballages CoWoS de TSMC de plus de 150 % en 2024. Les nouveaux produits de la plate-forme Blackwell de NVIDIA comprennent des GPU de série B et des cartes accélératrices GB200 intégrant le propre processeur GraceArm de NVIDIA. TrendForce confirme que la chaîne d'approvisionnement est actuellement très optimiste quant au GB200. On estime que les livraisons en 2025 devraient dépasser le million d'unités, représentant 40 à 50 % des GPU haut de gamme de Nvidia. Nvidia prévoit de livrer des produits tels que le GB200 et le B100 au second semestre, mais le conditionnement des plaquettes en amont doit encore adopter des produits plus complexes.

Taille du boîtier AMD « Strix Halo » FP11 exposée : équivalent à Intel LGA1700, 60 % plus grand que Phoenix Taille du boîtier AMD « Strix Halo » FP11 exposée : équivalent à Intel LGA1700, 60 % plus grand que Phoenix Jul 18, 2024 am 02:04 AM

Ce site Web a rapporté le 9 juillet que les processeurs de la série « Strix » à architecture AMD Zen5 auront deux solutions de packaging. Le plus petit StrixPoint utilisera le package FP8, tandis que le StrixHalo utilisera le package FP11. Source : source videocardz @Olrak29_ La dernière révélation est que la taille du boîtier FP11 de StrixHalo est de 37,5 mm x 45 mm (1 687 millimètres carrés), ce qui est la même que la taille du boîtier LGA-1700 des processeurs Intel AlderLake et RaptorLake. Le dernier APU Phoenix d'AMD utilise une solution de packaging FP8 d'une taille de 25*40 mm, ce qui signifie que le F de StrixHalo

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Comment obtenir facilement le code d'état HTTP en JavaScript Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

Comment les fonctions C++ améliorent-elles l'efficacité du développement d'interfaces graphiques en encapsulant du code ? Comment les fonctions C++ améliorent-elles l'efficacité du développement d'interfaces graphiques en encapsulant du code ? Apr 25, 2024 pm 12:27 PM

En encapsulant le code, les fonctions C++ peuvent améliorer l'efficacité du développement de l'interface graphique : Encapsulation du code : les fonctions regroupent le code en unités indépendantes, ce qui rend le code plus facile à comprendre et à maintenir. Réutilisabilité : les fonctions créent des fonctionnalités communes qui peuvent être réutilisées dans toutes les applications, réduisant ainsi la duplication et les erreurs. Code concis : le code encapsulé rend la logique principale concise et facile à lire et à déboguer.

Découvrez des exemples de bonnes pratiques de conversion de pointeur dans Golang Découvrez des exemples de bonnes pratiques de conversion de pointeur dans Golang Feb 24, 2024 pm 03:51 PM

Golang est un langage de programmation puissant et efficace qui peut être utilisé pour développer diverses applications et services. Dans Golang, les pointeurs sont un concept très important, qui peut nous aider à exploiter les données de manière plus flexible et plus efficace. La conversion de pointeur fait référence au processus d'opérations de pointeur entre différents types. Cet article utilisera des exemples spécifiques pour découvrir les meilleures pratiques de conversion de pointeur dans Golang. 1. Concepts de base Dans Golang, chaque variable a une adresse, et l'adresse est l'emplacement de la variable en mémoire.

La relation entre le nombre d'instances Oracle et les performances de la base de données La relation entre le nombre d'instances Oracle et les performances de la base de données Mar 08, 2024 am 09:27 AM

La relation entre le nombre d'instances Oracle et les performances de la base de données La base de données Oracle est l'un des systèmes de gestion de bases de données relationnelles les plus connus du secteur et est largement utilisée dans le stockage et la gestion de données au niveau de l'entreprise. Dans la base de données Oracle, l'instance est un concept très important. L'instance fait référence à l'environnement d'exécution de la base de données Oracle en mémoire. Chaque instance possède une structure de mémoire et un processus d'arrière-plan indépendants, qui sont utilisés pour traiter les demandes des utilisateurs et gérer les opérations de la base de données. Le nombre d'instances a un impact important sur les performances et la stabilité de la base de données Oracle.

See all articles