jQuery轮播图插件camRoll Slider

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery轮播图插件camRoll Slider
jQuery轮播图插件camRoll Slider
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-06-27
    阅读:
简要教程

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; 
  } 
}
                

camRoll Slider插件的github网址为:https://github.com/dim1100010/camroll_slider

下一篇:没有了