首页 > 代码库 > 图片轮播效果2
图片轮播效果2
再次写了个焦点图的轮播效果，
效果：http://edwardzhong.github.io/blog/2014/11/01/slicPics2.html
更多：http://edwardzhong.github.io/blog/
html如下：
<div class="container"> <div class="wrap"> <div class="left" title="前一张"><i><</i></div> <div class="right" title="后一张"><i>></i></div> <ul class="pics"> <li><img src="../images/Chrysanthemum.jpg" alt="" /></li> <li><img src="../images/Desert.jpg" alt="" /></li> <li><img src="../images/Hydrangeas.jpg" alt="" /></li> <li><img src="../images/Jellyfish.jpg" alt="" /></li> <li><img src="../images/Koala.jpg" alt="" /></li> <li><img src="../images/Lighthouse.jpg" alt="" /></li> <li><img src="../images/Penguins.jpg" alt="" /></li> <li><img src="../images/Tulips.jpg" alt="" /></li> </ul> </div></div>
样式如下：
<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如下：
<script> $(function(){ var wrap=$(‘.wrap‘), picUl=wrap.children(‘.pics‘), lis=picUl.children(‘li‘), len=lis.length, w=wrap.width(), nav,navs=‘‘,i, timer=null; //初始化 function init(){ picUl.css(‘width‘,w*len+‘px‘); nav=$(‘<ul class="nav"></ul>‘).appendTo(wrap); for(i=0;i<len;i++){ navs+=‘<li>‘+(i+1)+‘</li>‘; } nav.append(navs); navs=nav.children(‘li‘); i=0; action(); } //执行动画 function action(){ if(i==len){ i=0; } if(i<0){ i=len-1; } wrap.animate({ scrollLeft: i * w }, 600); $(navs[i]).addClass(‘active‘).siblings(‘.active‘).removeClass(‘active‘); } //自动播放 function next(){ timer=setInterval(function(){ i++; action(); },2000); } //绑定事件 function bindEvents(){ $(‘.left‘).on(‘click‘,function(){ i--; action(); }); $(‘.right‘).on(‘click‘,function(){ i++; action(); }); wrap.on(‘mouseover‘,function(){ clearInterval(timer); }).on(‘mouseout‘,next); nav.on(‘click‘, ‘li‘, function() { i=$(this).index(); action(); }); } init(); next(); bindEvents(); });</script>
图片轮播效果2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。