집 >웹 프론트엔드 >JS 튜토리얼 >JSON 형식 데이터를 기반으로 하는 간단한 jQuery 슬라이드쇼 플러그인(jquery-slider) 소개

JSON 형식 데이터를 기반으로 하는 간단한 jQuery 슬라이드쇼 플러그인(jquery-slider) 소개

不言원래의: 2018-07-02 14:50:161601검색

이 글에서는 JSON 형식의 데이터를 기반으로 하는 간단한 jQuery 슬라이드쇼 플러그인(jquery-slider)에 대한 소개를 주로 하고 있습니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. 슬라이더 슬라이드쇼 슬라이드 플러그인은 json 데이터를 통해 이미지 주소와 설명 정보를 제공하는 동시에 json 데이터를 교체하여 다른 사진 간에 동적으로 전환할 수도 있습니다. json 데이터 jquery 슬라이드 플러그인 관련 지식은 함께 배워야 한다

jquery-slider는 JSON 형식의 데이터를 기반으로 한 jQuery 슬라이드쇼 플러그인입니다. 이 슬라이드에서는 JSON 데이터를 통해 이미지 주소와 설명 정보를 제공합니다. JSON 데이터를 대체하여 여러 이미지 간에 동적으로 전환할 수 있습니다.

사용법

jquery 및 Slider.js 파일과 멋진 글꼴 아이콘 파일을 페이지에 도입하세요.

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

e388a4556c0f65e1904146cc1a846bee를 슬라이드의 컨테이너로 사용하고 bb9345e55eb71822850ff156dfde57c8 요소를 내부에 배치합니다.

<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 스타일

슬라이드쇼에 다음 CSS 스타일을 설정하세요.

.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

본 슬라이드의 사진 및 사진 설명 정보는 JSON 데이터로 제공되며 형식은 다음과 같습니다.

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

jquery의 github 주소- 슬라이더 슬라이드쇼 플러그인은 https://github.com/eryasov/jquery-slider

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트에 주목하세요!

JSON 형식 데이터를 기반으로 하는 간단한 jQuery 슬라이드쇼 플러그인(jquery-slider) 소개

관련 기사