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

不言

Release： 2018-07-02 14:50:16

Original

1494 people have browsed it

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.

Copy after login

##HTML structure

Use a

as the container for the slideshow , which places the

Copy after login

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

Copy after login

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

Copy after login

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!

Related labels：

json数据jquery幻灯片插件

source：php.cn

Previous article：How to load navigation history when using jQuery mobile class library Next article：Introduction to jquery setting the height of a label element to the percentage of the screen

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn