Un exemple simple d'utilisation de JavaScript pour implémenter un diaporama-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Un exemple simple d'utilisation de JavaScript pour implémenter un diaporama

黄舟

Nov 20, 2017 am 09:22 AM

javascript js 幻灯片

Dans notre travail de développement quotidien, nous rencontrons souvent des transitions de diapositives. Nous savons tous que les transitions de diapositives courantes ne sont rien de plus que des carrousels et des dégradés. Quel que soit le type de transitions de diapositives, nous utilisons Minuterie Ceci est réalisé. en modifiant progressivement certains attributs des images ou des groupes d'images. Aujourd'hui, je vais vous présenter un exemple simple de mise en œuvre d'un diaporama en utilisant JavaScript !

Abandonnez les autres effets, le carrousel le plus simple n'a qu'une seule instruction :
parent.appendChild(parent.firstChild), ajoute continuellement un élément de la liste au dernier, appendChild ajoutera le nœud supprimé de son position d'origine, afin de créer un effet de commutation.
Un point, IE traite les nœuds de texte différemment des autres navigateurs. Vous devez faire attention lors de l'obtention de nœuds enfants. De plus, dans différentes versions de FF, l'attribut children doit également être pris en compte.
La démo ci-dessous ne définit pas le overflow:hidden de #view.

demo_1 :

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: &#39;.&#39;; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById(&#39;img_list&#39;); 
setInterval(function(){ 
img_list.appendChild(img_list.firstChild); 
},500) 
</script> 
</body> 
</html>

Copier après la connexion

(la démo ci-dessus n'a en fait pas besoin d'être lancée, ce n'est que pour une démonstration ultérieure)
Une autre façon consiste à déplacer la liste entière dans une certaine direction sans changer l'ordre des nœuds (en changeant continuellement l'attribut gauche de la liste),
demo_2 :

Le code est le suivant :

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: &#39;.&#39;; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById(&#39;img_list&#39;); 
img_list.style.left = 0; 
setInterval(function(){ 
img_list.style.left = parseInt(img_list.style.left) == -640 ? 0: (parseInt(img_list.style.left) - 320 + &#39;px&#39;); 
},500) 
</script> 
</body> 
</html>

Copier après la connexion

La démo ci-dessus est abrupte et ne fait pas du bien, vous pouvez donc ajouter un effet de mouvement fluide.
Le soi-disant effet de mouvement fluide consiste en fait à décomposer chaque grande étape de la deuxième démo ci-dessus en plusieurs petites parties, et à diviser un mouvement de 320 pixels en 50 fois pour l'exécuter
demo_3 :

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: &#39;.&#39;; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById(&#39;img_list&#39;); 
img_list.style.left = 0; 
setInterval(function(){ 
for(var i = 0 ; i < 100 ; i++){ 
(function(pos){ 
setTimeout(function(){ 
img_list.style.left = parseInt(img_list.style.left) == -640 ? 0: -pos/100 * 640+&#39;px&#39;; 
},(pos + 1)*10) 
})(i) 
} 
},1500) 
</script> 
</body> 
</html>

Copier après la connexion

Pour le cas de demo_1, nous pouvons réduire continuellement la largeur de firstChild pour obtenir un effet similaire à demo_3.
demo_4

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: &#39;.&#39;; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById(&#39;img_list&#39;); 
setInterval(function(){ 
var current = img_list.children[0]; 
for(var i = 0 ; i < 100 ; i++){ 
(function(pos){ 
setTimeout(function(){ 
current.style.width = 320 - (pos/100)*320 + &#39;px&#39;; 
},(pos + 1)*10) 
})(i) 
} 
setTimeout(function(){ 
img_list.appendChild(current); 
current.style.width = &#39;320px&#39;; 
},1010); 
},1500) 
</script> 
</body> 
</html>

Copier après la connexion

Les méthodes ci-dessus sont similaires en principe. De plus, vous pouvez également définir un dégradé transparent pour créer une image. transparent de 1 à 0, de sorte que l'effet de commutation peut également être produit et les changements de code sont très faibles.
demo_5 :

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: &#39;.&#39;; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{position: absolute; top:0; left: 0; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById(&#39;img_list&#39;); 
setInterval(function(){ 
var current = img_list.children[0]; 
for(var i = 0 ; i < 100 ; i++){ 
(function(pos){ 
setTimeout(function(){ 
current.style.opacity = 1 - (pos/100)*1; 
},(pos + 1)*10) 
})(i) 
} 
setTimeout(function(){ 
img_list.appendChild(current); 
current.style.opacity = 1; 
},1010); 
},1500) 
</script> 
</body> 
</html>

Copier après la connexion

Quant à d'autres effets magnifiques, ils peuvent être traités par d'autres combinaisons.
Une méthode de traitement consiste à diviser l'image en n zones, à définir l'arrière-plan sur l'image qui doit être affichée, puis à afficher l'arrière-plan correspondant dans différentes zones. De cette façon, une image de 100*100 peut être divisée en 100 petits carrés de 10*10, puis ces carrés sont traités pour obtenir plus d'effets. En théorie, il peut être divisé en 10 000 points 1*1, mais le navigateur va exploser...
demo_6 :

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0; border: 0;} 
body{ padding: 50px;} 
.sep{ float: left; margin:1px 1px 0 0;} 
</style> 
</head> 
<body> 
<img id="img" src="../动画/apple.jpg" alt="" /> 
<p id="wrap" style="position: relative; "></p> 
<script type="text/javascript"> 
var img = document.getElementById(&#39;img&#39;); 
var wrap = document.getElementById(&#39;wrap&#39;); 
img.onload = function(){ 
console.dir(img); 
var h = img.naturalHeight; 
var w = img.naturalWidth; 
newPanel(w,h); 
} 
function newPanel(w,h){ 
var cols = 10; 
var rows = 10; 
var colWidth = Math.floor(w/cols); 
var rowHeight = Math.floor(w/rows); 
for(var row = 0; row < rows; row++){ 
for(var col =0; col < cols; col++){ 
var p = document.createElement(&#39;p&#39;); 
p.style.width = colWidth + &#39;px&#39;; 
p.style.height= rowHeight + &#39;px&#39;; 
p.className= &#39;sep&#39;; 
p.style.backgroundImage = &#39;url(&#39; + img.src + &#39;)&#39;; 
p.style.backgroundPosition = -colWidth*col +&#39;px &#39; + -rowHeight*row +&#39;px&#39; ; 
wrap.appendChild(p); 
} 
} 
} 
setTimeout(function(){ 
setInterval(function(){ 
wrap.lastChild && wrap.removeChild(wrap.lastChild); 
},50) 
},1000) 
</script> 
</body> 
</html>

Copier après la connexion

C'est juste une démonstration, la largeur et la disposition spécifiques doivent être organisées par vous-même. Ou bien éliminer, ou masquer, correspondant à différentes dispositions et combinaisons, d'autres méthodes sont également plus faciles à mettre en œuvre.
Enfin, comme chacun le sait, CSS3 peut aussi réaliser quelques effets de slide,
demo_7 :

Le code est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ 
margin: 0; 
padding: 0; 
} 
#test{ 
position: relative; 
width: 300px; 
height: 200px; 
overflow: hidden; 
border: 1px solid #d4d4d4; 
} 
#test ul{ 
position: absolute; 
top:0; 
left: 0; 
height:200px; 
} 
#test ul li{ 
float: left; 
width: 300px; 
height:200px; 
} 
@-webkit-keyframes myAnimation{ 
0%{ 
top:0; 
} 
40%{ 
top:-200px; 
} 
70%{ 
top:-400px; 
} 
100%{ 
top:-600px; 
} 
} 
#test ul{ 
-webkit-animation-name:myAnimation; 
-webkit-animation-duration:4s; 
-webkit-animation-timing-function:linear; 
-webkit-animation-iteration-count:infinite; 
} 
</style> 
</head> 
<body> 
<p id="test"> 
<ul> 
<li><img width="300" height="200" src="../image/a.jpg" alt="" /></li> 
<li><img width="300" height="200" src="../image/a.jpg" alt="" /></li> 
<li><img width="300" height="200" src="../image/a.jpg" alt="" /></li> 
<li><img width="300" height="200" src="../image/a.jpg" alt="" /></li> 
</ul> 
</p> 
</body> 
</html>

Copier après la connexion

Résumé :

Cet article utilise de nombreux exemples pour expliquer le fonctionnement de JavaScript pour implémenter des slides. Je crois que mes amis y parviendront. cet article Après avoir étudié, j'ai une certaine compréhension de la mise en œuvre des slides !

Recommandations associées :

Code de génération de diaporama php+javascript

Code source pour JavaScript pour implémenter l'effet de diaporama pour le changement d'image

Méthode d'implémentation JS pour l'effet de diaporama Taobao

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

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

AI Clothes Remover

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

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Will R.E.P.O. Vous avez un jeu croisé?

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

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

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7548

Tutoriel CakePHP

1382

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

Introduction à la méthode d'insertion d'heptagones dans les diapositives PPT Mar 26, 2024 pm 07:46 PM

1. Ouvrez le document de diapositive PPT et dans la colonne [Contour, Diapositive] sur le côté gauche du PPT, cliquez pour sélectionner la diapositive dans laquelle vous souhaitez insérer la [forme] de base. 2. Après la sélection, sélectionnez le menu [Insérer] dans la barre de menu des fonctions au-dessus du PPT et cliquez. 3. Après avoir cliqué sur le menu [Insérer], la barre de sous-menu [Insérer] apparaît sous la barre de menu des fonctions. Sélectionnez le menu [Forme] dans la barre de sous-menu [Insérer]. 4. Cliquez sur le menu [Forme] pour faire apparaître la page de sélection du type de forme prédéfinie. 5. Dans la page de sélection du type de forme, sélectionnez la forme [Heptagone] et cliquez. 6. Après avoir cliqué, déplacez la souris vers l'interface d'édition de diapositives, appuyez sur la souris pour dessiner et relâchez la souris une fois le dessin terminé. Terminez l'insertion de la forme [heptagone].

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies en PHP et JS. Des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et de la technologie, le trading d'actions est devenu l'un des moyens importants pour de nombreux investisseurs. L'analyse boursière est une partie importante de la prise de décision des investisseurs, et les graphiques en bougies sont largement utilisés dans l'analyse technique. Apprendre à dessiner des graphiques en bougies à l'aide de PHP et JS fournira aux investisseurs des informations plus intuitives pour les aider à prendre de meilleures décisions. Un graphique en chandeliers est un graphique technique qui affiche les cours des actions sous forme de chandeliers. Il montre le cours de l'action

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

Étapes pour unifier la couleur du thème des diapositives PPT Mar 26, 2024 pm 08:51 PM

1. La palette de couleurs est naturellement liée au design, nous cliquons donc sur la barre d'outils de conception et sur le côté droit, vous pouvez voir les options de couleur. Pointez la souris vers le haut et vous pouvez voir que la couleur actuelle du thème est : Modèle de conception par défaut 1. 2. Cliquez sur cette option, et la première est la conception de couleur actuelle. Pour changer cela, nous allons descendre sous le panneau : Nouvelles couleurs du thème. 3. Cliquez dessus et dans la colonne de couleurs qui apparaît, vous pouvez voir qu'il existe trois couleurs de texte d'accentuation, toutes claires et presque impossibles à afficher sur un fond clair. Parmi elles se trouve la couleur du texte dans cet exemple. 4. Cliquez sur la flèche déroulante à droite de la couleur pour afficher le panneau de sélection des couleurs. Afin de ne pas détruire la correspondance globale des couleurs, choisissez une couleur sombre dans le système de couleurs primaires pour remplacer la couleur primaire. Remplacez les deux autres couleurs de la même manière. 5. Comparez la couleur modifiée avec la couleur d'origine. A gauche se trouve

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Avec le développement rapide de la finance sur Internet, l'investissement en actions est devenu le choix de plus en plus de personnes. Dans le trading d'actions, les graphiques en bougies sont une méthode d'analyse technique couramment utilisée. Ils peuvent montrer l'évolution des cours des actions et aider les investisseurs à prendre des décisions plus précises. Cet article présentera les compétences de développement de PHP et JS, amènera les lecteurs à comprendre comment dessiner des graphiques en bougies boursières et fournira des exemples de code spécifiques. 1. Comprendre les graphiques en bougies boursières Avant de présenter comment dessiner des graphiques en bougies boursières, nous devons d'abord comprendre ce qu'est un graphique en bougies. Les graphiques en chandeliers ont été développés par les Japonais

See all articles