Introduction to a simple jQuery slideshow plug-in (jquery-slider) based on JSON format data

This article mainly introduces the introduction of the simple jQuery slideshow plug-in (jquery-slider) based on JSON format data. It has certain reference value. Now I share it with you. Friends in need can refer to it

jquery-slider slideshow plug-in provides image address and description information through json data. At the same time, you can also replace json data to dynamically switch between different pictures. Friends who are interested in json data jquery slideshow plug-in related knowledge should learn together

jquery-slider is a jQuery slideshow plug-in based on JSON format data. This slide provides image address and description information through JSON data. You can dynamically switch between different images by replacing the JSON data.

Usage method

Introduce jquery and slider.js files and font-awesome fonts into the page icon file.

<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>

##HTML structure

Use a

as the container for the slideshow , which places the element as the front and back navigation buttons.

<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>

CSS Style

Set the following CSS style for the slideshow.

.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; }

JSON data

The pictures and picture description information of this slide have JSON The data is provided in the following format:

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": "图片描述"
}

The github address of the jquery-slider slide plug-in is: https://github.com/eryasov/jquery-slider

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to load navigation history when using jQuery mobile class library

About jquery ajaxfileuplod upload file essyui The effect of laoding

The above is the detailed content of Introduction to a simple jQuery slideshow plug-in (jquery-slider) based on JSON format data. For more information, please follow other related articles on the PHP Chinese website!