再次写了个焦点图的轮播效果,
效果:图片轮播图2
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如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<style> .clearfix:after{ content: '.'; display: block; height: 0; visibility: hidden; clear: both; } .clearfix{zoom:1;} .container{ position: relative; width: 400px;height: 300px; margin: 0 auto; } .wrap{ width: 100%;height: 100%; overflow: hidden; } .left,.right{ position: absolute; z-index: 1; width: 50%; height: 100%; background-color: transparent; cursor: pointer; } .left i,.right i{ position: absolute; font-style: normal; font-size: 50px; font-weight: bold; color: #ccc; top: 50%; margin-top: -28px; } .left i{ left: 5px; } .right i{ right: 5px; } .left{ float: left; } .right{ margin-left: 50%; } ul{ list-style-type: none; margin: 0;padding: 0; } ul li{ margin: 0;padding: 0; float: left; } .pics{ height: 300px; } .nav{ position: absolute; z-index: 2; right: 0;bottom: 10px; } .nav li{ width: 35px;height: 35px; line-height: 35px; margin-right: 4px; text-align: center; font-weight: bold; font-family: arial; border-radius: 50%; cursor:pointer; color:#fff; background: rgba(0,0,0,0.6); } .nav li:hover{ background: rgba(0,0,0,1); } .nav li.active{ color:#fff; background: rgba(0,255,255,0.6); } </style>
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=$('<ul class="nav"></ul>').appendTo(wrap); 13 for(i=0;i<len;i++){ 14 navs+='<li>'+(i+1)+'</li>'; 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();