幻灯片/轮播

基于JSON数据简单jQuery幻灯片插件

创客主机


jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件。该幻灯片通过JSON数据来提供图片地址和描述信息等,你可以通过更换JSON数据来动态切换不同的图片。

使用方法:

在页面中引入jquery和slider.js文件和font-awesome字体图标文件。

  1. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/slider.js"></script>

HTML结构:

使用一个<div>作为幻灯片的容器,里面放置作为前后导航按钮的<button>元素。

  1. <div class="slider" id="slider">
  2.   <button type="button" class="button button-prev">
  3.     <i class="fa fa-chevron-left" aria-hidden="true"></i>
  4.   </button>
  5.   <button type="button" class="button button-next">
  6.     <i class="fa fa-chevron-right" aria-hidden="true"></i>
  7.   </button>
  8. </div>

CSS样式:

为幻灯片设置下面的CSS样式。

  1. .slider {
  2.   width: 100%;
  3.   overflow: hidden;
  4.   height: 500px;
  5.   position: relative;
  6. }
  7. .sliderList {
  8.   position: absolute;
  9.   top: 0;
  10.   width: 300%;
  11.   height: 100%;
  12.   list-style: none;
  13. }
  14. .sliderList li {
  15.   position: absolute;
  16.   top: 0;
  17.   bottom: 0;
  18.   overflow: hidden;
  19.   width: 33.333333%;
  20.   height: 100%;
  21.   padding: 0;
  22.   margin: 0;
  23. }
  24. .sliderList li img {
  25.   width: 100%;
  26.   min-height: 100%;
  27.   border: none;
  28. }
  29. .bulletList {
  30.   position: absolute;
  31.   bottom: 15px;
  32.   width: 100%;
  33.   margin: 0 auto;
  34.   list-style: none;
  35. }
  36. .bulletList li {
  37.   display: inline-block;
  38.   width: 12px;
  39.   height: 12px;
  40.   margin: 0 5px;
  41.   -webkit-border-radius: 50%;
  42.   -moz-border-radius: 50%;
  43.   -ms-border-radius: 50%;
  44.   border-radius: 50%;
  45.   background-color: #fff;
  46.   cursor: pointer;
  47. }
  48. .bulletList .bulletActive { background-color: #0b0d18; }
  49. .content {
  50.   position: absolute;
  51.   top: 0;
  52.   left: 0;
  53.   right: 0;
  54.   background-color: rgba(0, 0, 0, 0.3);
  55.   font-size: 48px;
  56.   color: #fff;
  57. }
  58. .button {
  59.   position: absolute;
  60.   bottom: 15px;
  61.   z-index: 2;
  62.   display: block;
  63.   width: 40px;
  64.   height: 40px;
  65.   box-sizing: border-box;
  66.   margin: 0;
  67.   padding: 0;
  68.   border: none;
  69.   -webkit-border-radius: 5px;
  70.   -moz-border-radius: 5px;
  71.   -ms-border-radius: 5px;
  72.   border-radius: 5px;
  73.   background-color: rgba(5, 0, 36, 0.6);
  74.   color: #fff;
  75. }
  76. .button-prev { left: 15px; }
  77.  
  78. .button-next { right: 15px; }

JSON数据:

该幻灯片的图片和图片描述信息有JSON数据来提供,格式如下:

  1. sliderJSON = [
  2.   {
  3.     "imagePath": "1.jpg",
  4.     "order": "2",
  5.     "url": "#",
  6.     "slideText": "图片描述"
  7.   },
  8.   {
  9.     "imagePath": "2.jpg",
  10.     "order": "3",
  11.     "url": "#",
  12.     "slideText": "图片描述"
  13.   }, 
  14.   {
  15.     "imagePath": "3.jpg",
  16.     "order": "1",
  17.     "url": "#",
  18.     "slideText": "图片描述"
  19.   },
  20.   {
  21.     "imagePath": "4.jpg",
  22.     "order": "4",
  23.     "url": "#",
  24.     "slideText": "图片描述"
  25.   }

Github地址:https://github.com/eryasov/jquery-slider

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!