Introduction à un simple plug-in de diaporama jQuery (jquery-slider) basé sur des données au format JSON

Cet article présente principalement l'introduction du simple plug-in de diaporama jQuery (jquery-slider) basé sur des données au format JSON. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Le plug-in jquery-slider slideshow fournit des informations sur l'adresse et la description de l'image via les données json. En même temps, vous pouvez également remplacer les données json pour basculer dynamiquement entre différentes images. dans les connaissances connexes devraient apprendre ensemble

jquery-slider est un plug-in de diaporama jQuery basé sur des données au format JSON. Cette diapositive fournit des informations sur l'adresse et la description de l'image via les données JSON. Vous pouvez basculer dynamiquement entre différentes images en remplaçant les données JSON.

Utilisation

Introduire les fichiers jquery et slider.js et la police font-awesome dans l'icône de la page déposer.

<link rel=&#39;stylesheet&#39; href=&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css&#39;>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

Structure HTML

Utiliser un e388a4556c0f65e1904146cc1a846bee Conteneur dans lequel sont placés les éléments bb9345e55eb71822850ff156dfde57c8 utilisés comme boutons de navigation avant et arrière.

<p class="slider" id="slider">
<button type="button" class="button button-prev">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button type="button" class="button button-next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</button>
</p>

Styles CSS

Définissez les styles CSS suivants pour le diaporama.

.slider {
width: 100%;
overflow: hidden;
height: 500px;
position: relative;
}
.sliderList {
position: absolute;
top: 0;
width: 300%;
height: 100%;
list-style: none;
}
.sliderList li {
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
width: 33.333333%;
height: 100%;
padding: 0;
margin: 0;
}
.sliderList li img {
width: 100%;
min-height: 100%;
border: none;
}
.bulletList {
position: absolute;
bottom: 15px;
width: 100%;
margin: 0 auto;
list-style: none;
}
.bulletList li {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.bulletList .bulletActive { background-color: #0b0d18; }
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
font-size: 48px;
color: #fff;
}
.button {
position: absolute;
bottom: 15px;
z-index: 2;
display: block;
width: 40px;
height: 40px;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
background-color: rgba(5, 0, 36, 0.6);
color: #fff;
}
.button-prev { left: 15px; }
.button-next { right: 15px; }

Données JSON

Informations de description de l'image et de l'image de cette diapositive JSON les données sont fournies au format suivant :

sliderJSON = [
{
"imagePath": "1.jpg",
"order": "2",
"url": "#",
"slideText": "图片描述"
},
{
"imagePath": "2.jpg",
"order": "3",
"url": "#",
"slideText": "图片描述"
}, 
{
"imagePath": "3.jpg",
"order": "1",
"url": "#",
"slideText": "图片描述"
},
{
"imagePath": "4.jpg",
"order": "4",
"url": "#",
"slideText": "图片描述"
}

L'adresse github du plug-in de diaporama jquery-slider est : https://github.com /eryasov /jquery-slider

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment charger l'historique de navigation lors de l'utilisation de la bibliothèque de classes mobile jQuery

À propos de jquery ajaxfileuplod télécharger le fichier essyui L'effet du chargement

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!