幻灯片/轮播

CamRoll Slider 图片轮播幻灯片jQuery插件

面包多

CamRoll Slider 图片轮播幻灯片jQuery插件-创客云
CamRoll Slider 是一款 jQuery 轮播图插件。该插件使用简单,界面采用 CSS3 过渡动画,简洁时尚。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="camroll_slider.css">
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script type="text/javascript" src="camroll_slider.js"></script>

HTML 结构

  1. <div id="my-slider" class="crs-wrap"> 
  2. <div class="crs-screen"> 
  3.   <div class="crs-screen-roll"> 
  4.     <div class="crs-screen-item" style="background-image: url('images/1.jpg')">
  5.       <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
  6.     </div> 
  7.   </div> 
  8. </div> 
  9. <div class="crs-bar"> 
  10.   <div class="crs-bar-roll-current"></div> 
  11.   <div class="crs-bar-roll-wrap"> 
  12.     <div class="crs-bar-roll"> 
  13.       <div class="crs-bar-roll-item" style="background-image: url('images/1.jpg')"></div>
  14.     </div> 
  15.   </div> 
  16. </div> 
  17. <div class="crs-bar"> 
  18.   <div class="crs-bar-roll-current"></div> 
  19.   <div class="crs-bar-roll-wrap"> 
  20.     <div class="crs-bar-roll"> 
  21.       <div class="crs-bar-roll-item" style="background-image: url('images/2.jpg')"></div>
  22.     </div> 
  23.   </div> 
  24. </div>
  25. <div class="crs-bar"> 
  26.   <div class="crs-bar-roll-current"></div> 
  27.   <div class="crs-bar-roll-wrap"> 
  28.     <div class="crs-bar-roll"> 
  29.       <div class="crs-bar-roll-item" style="background-image: url('images/3.jpg')"></div>
  30.     </div> 
  31.   </div> 
  32. </div>
  33. </div>

初始化插件

  1. $("#my-slider").camRollSlider();

CSS 样式

  1. #my-slider { 
  2.   width: 100%; 
  3.   height: 404px; 
  4.   color: white; 
  5. } 
  6.  
  7. @media (max-width: 640px) { 
  8.  
  9.   #my-slider .crs-bar-roll-current { 
  10.     width: 38px; 
  11.     height: 38px; 
  12.   } 
  13.  
  14.   #my-slider .crs-bar-roll-item { 
  15.     width: 30px; 
  16.     height: 30px; 
  17.   } 
  18. }

Github 网址:https://github.com/dim1100010/camroll_slider

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!