Comment js réalise-t-il l'effet carrousel JD ?
Cet article vous présente principalement en détail l'effet carrousel JS implémenté dans JS. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
L'exemple dans cet article partage avec vous l'implémentation JS de JD. . Le code spécifique à l'effet carrousel est pour votre référence. Le contenu spécifique est le suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,li{padding:0;margin:0;}
li{list-style-type:none;}
.wrap{
position:relative;
width:480px;
height:260px;
margin:100px auto;
}
.wrap>ul>li{position:absolute;display:none;}
/*隐藏所有的li*/
.wrap img{width:480px;height:260px;}
.wrap li:first-child{display:block;}/*显示第一个*/
.arrow{
width:480px;
height:60px;
position:absolute;
top:50%;
margin-top:-30px;
display:none;
}
.arrow>span{
font-size:24pt;
line-height:60px;
display:inline-block;
width:36px;
background-color:#CEE5E8;
text-align:center;
cursor:pointer;
opacity:0.5;
border-radius:5px;/*显示圆框*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
color:black;
}
.wrap:hover .arrow{
display:block;
}
.arrow>span:last-child{
float:right;
}
</style>
</head>
<body>
<p class="wrap">
<!--图片部分-->
<ul>
<li>
<a href="javascript:void(0)">
<img src="images/1.jpg"/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/2.jpg"/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/3.jpg"/>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/4.jpg"/>
</a>
</li>
</ul>
<!--按钮部分-->
<p class="arrow">
<span><</span>
<span>></span>
</p>
</p>
</body>
<script src="jquery-1.12.0.min.js"></script>
<script>
$(function(){
var count = 0;
function change() {
count++;
if( count == $(".wrap>ul>li").length){
count = 0;
}
$(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
}
var myTimer = setInterval(change,4000);
function reRun(){
myTimer = setInterval(change,4000);
}
/*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/
$(".arrow>span").eq(0).click(function(){
clearInterval(myTimer);
/*清除计时器，目的在于不会因点击按钮时setInterval事件仍旧执行*/
count--;
if( count == -1){
count = $(".wrap>ul>li").length - 1;
} $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
setTimeout(reRun,0);
/*重新启动计时器，保证不点击按钮是能正常切换*/
});
$(".arrow>span").eq(1).click(function(){
clearInterval(myTimer);
count++;
if( count == $(".wrap>ul>li").length){
count = 0;
} $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
setTimeout(reRun,0);
});
});
</script>
</html>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!
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.
Article chaud
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)
Sujets chauds
1359
52
Les utilisateurs rencontrent de rares problèmes : les montres intelligentes Samsung Watch rencontrent soudainement des problèmes d'écran blanc
Apr 03, 2024 am 08:13 AM
Vous avez peut-être rencontré le problème des lignes vertes apparaissant sur l'écran de votre smartphone. Même si vous ne l'avez jamais vu, vous avez sûrement vu des images associées sur Internet. Alors, avez-vous déjà rencontré une situation où l’écran de la montre intelligente devient blanc ? Le 2 avril, CNMO a appris par des médias étrangers qu'un utilisateur de Reddit avait partagé une photo sur la plateforme sociale, montrant l'écran des montres intelligentes de la série Samsung Watch devenant blanc. L'utilisateur a écrit : « J'étais en train de charger quand je suis parti, et quand je suis revenu, c'était comme ça. J'ai essayé de redémarrer, mais l'écran était toujours comme ça pendant le processus de redémarrage. L'écran de la montre intelligente Samsung Watch est devenu blanc. L'utilisateur de Reddit n'a pas précisé le modèle spécifique de la montre intelligente. Cependant, à en juger par l’image, il devrait s’agir de la Samsung Watch5. Auparavant, un autre utilisateur de Reddit avait également signalé
JD.com améliore encore son service d'assurance fret « retour et échange porte-à-porte gratuits », qui devrait être entièrement lancé d'ici la fin août.
Aug 14, 2024 am 10:09 AM
Ce site Web a rapporté le 13 août que, afin d'améliorer l'expérience d'achat des consommateurs et de fournir aux commerçants des outils de gestion des commandes de service après-vente plus pratiques et plus efficaces, JD.com a lancé en avril un service de « retour et échange gratuits à domicile ». cette année. Remarque sur ce site : Le service « retour et échange porte-à-porte gratuits » signifie qu'après que le commerçant a souscrit à « l'assurance transport (version améliorée) » pour activer le service « retour et échange porte-à-porte gratuits » , le consommateur initie un retour ou un échange des marchandises avec le logo « retour et échange porte-à-porte gratuits » affiché à la réception. Lors de la demande de marchandises, la compagnie d'assurance fournit des services d'assurance pour les frais d'expédition aller simple engagés pour. retours et échanges. Lorsque l'assurance fret est remplie (y compris l'assurance fret du vendeur et l'assurance fret de l'acheteur), le livreur ne facturera pas de fret au client lors de la prise en charge du colis, et le commerçant ne se verra pas non plus facturer de fret après avoir récupéré le colis. La société paiera la compensation directement à Beijing Delivery, la page de détails indiquera que le montant de l'expédition est de 0. Maintenant
Examen du radiateur Kyushu Fengshen Assassin 4S Style 'Assassin Master' refroidi par air
Mar 28, 2024 am 11:11 AM
En parlant d'ASSASSIN, je pense que les joueurs penseront certainement aux maîtres assassins d'"Assassin's Creed". Ils sont non seulement talentueux, mais ont aussi le credo de "se consacrer aux ténèbres et au service de la lumière". châssis/alimentation/refroidissement domestiques bien connus La série ASSASSIN de radiateurs refroidis par air phares de la marque d'appareils DeepCool coïncide les uns avec les autres. Récemment, le dernier produit de cette série, ASSASSIN4S, a été lancé "Assassin in Suit, Advanced" et apporte une nouvelle expérience de refroidissement par air aux joueurs avancés. L'apparence est pleine de détails. Le radiateur Assassin 4S adopte une structure à double tour + un seul ventilateur intégré. L'extérieur est recouvert d'un carénage en forme de cube, qui a un fort sens général. Couleurs pour répondre à différentes couleurs.
Art exquis de la lumière et de l'ombre au printemps, Haqu H2 est le choix rentable
Apr 17, 2024 pm 05:07 PM
Avec l’arrivée du printemps, tout renaît et tout est plein de vitalité et de vitalité. En cette belle saison, comment ajouter une touche de couleur à votre intérieur ? Le projecteur Haqu H2, avec son design exquis et son excellent rapport coût-efficacité, est devenu une beauté indispensable ce printemps. Ce projecteur H2 est compact mais élégant. Qu'il soit placé sur le meuble TV du salon ou à côté de la table de chevet dans la chambre, il peut devenir un magnifique paysage. Son corps est fait d'une texture mate blanc laiteux. Cette conception donne non seulement au projecteur un aspect plus avancé, mais augmente également le confort du toucher. Le matériau texturé en cuir beige ajoute une touche de chaleur et d'élégance à l'apparence générale. Cette combinaison de couleurs et de matériaux est non seulement conforme à la tendance esthétique des maisons modernes, mais peut également être intégrée dans
Test de l'alimentation à module complet Huntkey MX750P : 750 W de puissance concentrée en platine
Mar 28, 2024 pm 03:20 PM
Grâce à sa taille compacte, la plate-forme ITX a attiré de nombreux acteurs à la recherche d'une beauté ultime et unique. Grâce à l'amélioration des processus de fabrication et aux progrès technologiques, les cartes graphiques Intel Core de 14e génération et les séries RTX40 peuvent exercer leur force sur la plate-forme ITX. les joueurs ont également des exigences plus élevées en matière d'alimentation SFX. Huntkey, passionné de jeux, a lancé une nouvelle alimentation de la série MX dans la plate-forme ITX qui répond aux exigences de haute performance, l'alimentation à module complet MX750P a une puissance nominale allant jusqu'à 750 W et a passé la certification de niveau platine 80PLUS. Ci-dessous, nous apportons l’évaluation de cette alimentation. L'alimentation à module complet Huntkey MX750P adopte un concept de design simple et à la mode. Il existe deux modèles en noir et blanc parmi lesquels les joueurs peuvent choisir. Les deux utilisent un traitement de surface mat et ont une bonne texture avec des polices gris argenté et rouge.
Test du Colorful Hidden Star P15 24 : un ordinateur portable de jeu polyvalent avec une belle apparence et des performances
Mar 06, 2024 pm 04:40 PM
Dans l’ère actuelle de développement technologique rapide, les ordinateurs portables sont devenus un outil indispensable et important dans la vie quotidienne et au travail des gens. Pour les joueurs qui ont des exigences de performances élevées, un ordinateur portable doté d’une configuration puissante et d’excellentes performances peut répondre à leurs besoins les plus exigeants. Avec ses excellentes performances et son design époustouflant, l'ordinateur portable Colorful Hidden Star P15 est devenu le leader du futur et peut être qualifié de modèle d'ordinateurs portables durs. Colorful Hidden Star P1524 est équipé d'un processeur Intel Core i7 de 13e génération et d'un GPU RTX4060Laptop. Il adopte un style de conception de vaisseau spatial plus à la mode et offre d'excellentes performances dans les détails. Jetons d'abord un coup d'œil aux fonctionnalités de ce portable. Supreme équipé du processeur Intel Core i7-13620H
Comprenez facilement les images 4K HD ! Ce grand modèle multimodal analyse automatiquement le contenu des affiches Web, ce qui le rend très pratique pour les travailleurs.
Apr 23, 2024 am 08:04 AM
Un modèle volumineux capable d'analyser automatiquement le contenu des PDF, des pages Web, des affiches et des graphiques Excel n'est pas très pratique pour les travailleurs. Le modèle InternLM-XComposer2-4KHD (en abrégé IXC2-4KHD) proposé par Shanghai AILab, l'Université chinoise de Hong Kong et d'autres instituts de recherche en fait une réalité. Par rapport à d'autres grands modèles multimodaux qui ont une limite de résolution ne dépassant pas 1 500 x 1 500, ce travail augmente l'image d'entrée maximale des grands modèles multimodaux à une résolution supérieure à 4K (3 840 x 1 600) et prend en charge n'importe quel rapport d'aspect et 336 pixels en 4K. Changements de résolution dynamiques. Trois jours après sa sortie, le modèle était en tête de la liste de popularité des modèles de réponses visuelles aux questions HuggingFace. Facile à manier
Comment vérifier la logistique express sur 'JD.com'
Mar 11, 2024 pm 01:52 PM
JD Express Logistics est une société de livraison express bien connue. Afin de permettre aux utilisateurs de vérifier l'état logistique des commandes, JD propose une variété de méthodes de requête. Ce qui suit présentera plusieurs méthodes de requête couramment utilisées, vous permettant de suivre facilement les derniers développements de votre package. Comment vérifier JD Express Logistics : Accédez au site Web [https://www.jdl.com/orderSearch/?waybillCodes=] pour interroger les détails : Méthode 1 [Requête sur le site Web] 1. Ouvrez le site Web [https://www. jdl.com/orderSearch/?waybillCodes=】. 2. Saisissez le numéro de commande logistique dans la case et cliquez sur [Vérifier maintenant]. 3. Le numéro de lettre de transport et les informations logistiques seront affichés ci-dessous. Méthode 2
