首页>>Jquery文字>>css3 slide滑动焦点图 文字或者图片均支持(2014-02-20)

css3 slide滑动焦点图 文字或者图片均支持

css3 slide滑动焦点图 文字或者图片均支持
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="slider">  
  2.             <ul class="slides">  
  3.                 <li class="slide"><div class="box" style="background-color: #1abc9c;"></div></li>  
  4.                 <li class="slide"><div class="box" style="background-color: #16a085;"></div></li>  
  5.                 <li class="slide"><div class="box" style="background-color: #f1c40f;"></div></li>  
  6.                 <li class="slide"><div class="box" style="background-color: #f39c12;"></div></li>  
  7.                 <li class="slide"><div class="box" style="background-color: #d35400;"></div></li>  
  8.                 <li class="slide"><div class="box" style="background-color: #c0392b;"></div></li>     
  9.             </ul>  
  10.         </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             var glide = $('.slider').glide().data('api_glide');  
  3.   
  4.                 $(window).on('keyup', function (key) {  
  5.                     if (key.keyCode === 13) {  
  6.                         glide.jump(3, console.log('Wooo!'));  
  7.                     };  
  8.                 });  
  9.   
  10.                 glide.afterChange(function() {  
  11.                     alert('lelele');  
  12.                 });  
  13.   
  14.                 $('.slider-arrow').on('click', function() {  
  15.                     console.log(glide.current());  
  16.                 });  
  17.         </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_273.html