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