jQuery轮播图插件camRoll Slider-灵象搜搜资源网

jQuery轮播图插件camRoll Slider

发布2020-11-08 浏览952次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长（171373236#qq.com）！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

camRoll Slider是一款jQuery轮播图插件。该插件使用简单，界面采用CSS3过渡动画，简洁时尚。

使用方法

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

lt;link rel="stylesheet" type="text/css" href="camroll_slider.css"gt;
lt;script src="js/jquery.min.js" type="text/javascript"gt;lt;/scriptgt;
lt;script type="text/javascript" src="camroll_slider.js"gt;lt;/scriptgt;

HTML结构

lt;div id="my-slider" class="crs-wrap"gt; 
lt;div class="crs-screen"gt; 
  lt;div class="crs-screen-roll"gt; 
    lt;div class="crs-screen-item" style="background-image: url('images/1.jpg')"gt;
      lt;div class="crs-screen-item-content"gt;lt;h1gt;Lorem...lt;/h1gt;lt;/divgt;
    lt;/divgt; 
  lt;/divgt; 
lt;/divgt; 
lt;div class="crs-bar"gt; 
  lt;div class="crs-bar-roll-current"gt;lt;/divgt; 
  lt;div class="crs-bar-roll-wrap"gt; 
    lt;div class="crs-bar-roll"gt; 
      lt;div class="crs-bar-roll-item" style="background-image: url('images/1.jpg')"gt;lt;/divgt;
    lt;/divgt; 
  lt;/divgt; 
lt;/divgt; 
lt;div class="crs-bar"gt; 
  lt;div class="crs-bar-roll-current"gt;lt;/divgt; 
  lt;div class="crs-bar-roll-wrap"gt; 
    lt;div class="crs-bar-roll"gt; 
      lt;div class="crs-bar-roll-item" style="background-image: url('images/2.jpg')"gt;lt;/divgt;
    lt;/divgt; 
  lt;/divgt; 
lt;/divgt;
lt;div class="crs-bar"gt; 
  lt;div class="crs-bar-roll-current"gt;lt;/divgt; 
  lt;div class="crs-bar-roll-wrap"gt; 
    lt;div class="crs-bar-roll"gt; 
      lt;div class="crs-bar-roll-item" style="background-image: url('images/3.jpg')"gt;lt;/divgt;
    lt;/divgt; 
  lt;/divgt; 
lt;/divgt;
lt;/divgt;

初始化插件

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

CSS样式

#my-slider { 
  width: 100%; 
  height: 404px; 
  color: white; 
} 

@media (max-width: 640px) { 

  #my-slider .crs-bar-roll-current { 
    width: 38px; 
    height: 38px; 
  } 

  #my-slider .crs-bar-roll-item { 
    width: 30px; 
    height: 30px; 
  } 
}