图片轮播效果2

再次写了个焦点图的轮播效果，

效果：图片轮播图2

更多：Jeff Zhong's Demo

 

html如下：

 1 <div class="container">
 2     <div class="wrap">
 3         <div class="left" title="前一张"><i class="icon-left-open">i>div>
 4         <div class="right" title="后一张"><i class="icon-right-open">i>div>
 5         <ul class="pics">
 6             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetbudalagongrc1.jpg" />li>
 7             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetzhongjiaolukang3.jpg" />li>
 8             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetbudalagongyejing2.jpg" />li>
 9             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorl1.jpg" />li>
10             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorc16.jpg" />li>
11             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorl13.jpg" />li>
12             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorl14.jpg" />li>
13             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorl15.jpg" />li>
14         ul>
15     div>
16 div>

 

css如下：

View Code

 js如下：

 1     $(function(){
 2         var wrap=$('.wrap'),
 3             picUl=wrap.children('.pics'),
 4             lis=picUl.children('li'),
 5             len=lis.length,
 6             w=wrap.width(),
 7             nav,navs='',i,
 8             timer=null;
 9         //初始化
10         function init(){
11             picUl.css('width',w*len+'px');
12             nav=$('
').appendTo(wrap);
13             for(i=0;i){
14                 navs+='
'+(i+1)+'
';
15             }
16             nav.append(navs);
17             navs=nav.children('li');
18             i=0;
19             action();
20         }
21         //执行动画
22         function action(){
23             if(i==len){
24                 i=0;
25             }
26             if(i<0){
27                 i=len-1;
28             }
29             wrap.animate({ scrollLeft: i * w }, 600);
30             $(navs[i]).addClass('active').siblings('.active').removeClass('active');
31         }
32         //自动播放
33         function next(){
34             timer=setInterval(function(){
35                 i++;
36                 action();
37             },2000);
38         }
39         //绑定事件
40         function bindEvents(){
41             $('.left').on('click',function(){
42                 i--;
43                 action();
44             });
45             $('.right').on('click',function(){
46                 i++;
47                 action();
48             });
49 
50             wrap.on('mouseover',function(){
51                 clearInterval(timer);
52             }).on('mouseout',next);
53 
54             nav.on('click', 'li', function() {
55                 i=$(this).index();
56                 action();
57             });
58         }
59 
60         init();
61         next();
62         bindEvents();