jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件。该幻灯片通过JSON数据来提供图片地址和描述信息等,你可以通过更换JSON数据来动态切换不同的图片。
在线预览 源码下载
使用方法
在页面中引入jquery和slider.js文件和font-awesome字体图标文件。
1 2 3
| < link rel = 'stylesheet' href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css' >
< script type = "text/javascript" src = "js/jquery.min.js" ></ script >
< script type = "text/javascript" src = "js/slider.js" ></ script >
|
HTML结构
使用一个<div>
作为幻灯片的容器,里面放置作为前后导航按钮的<button>
元素。
1 2 3 4 5 6 7 8
| < div 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 >
</ div >
|
CSS样式
为幻灯片设置下面的CSS样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
| .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数据
该幻灯片的图片和图片描述信息有JSON数据来提供,格式如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| 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-slider幻灯片插件的github地址为:https://github.com/eryasov/jquery-slider
在线预览 源码下载
从事前端的加微信:1652703422,共同交流进步!
原标题:基于JSON数据的简单jQuery幻灯片插件
关键词:JS