jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <style type="text/css"> html,h2,h4,ul,li{margin:0;padding:0;} ul,li{list-style:none;} .v_show{ border:1px solid #aaa; margin:0 auto; width:520px; } .v_caption{ height:30px; line-height:30px; border-bottom:1px solid #dfdfdf; overflow:hidden; position:relative; } .v_caption h2{ float:left; font-size:16px; } .v_caption em{ position:absolute; right:0; top:0; } .highlight_tip{ float:left; } .highlight_tip span{ background:#ddd; display:inline-block; width:8px; height:8px; margin-right:2px; border-radius:4px; text-indent:-99px; overflow:hidden; cursor:pointer; } .highlight_tip .current{ background:#fc0; } .change_btn span{ cursor:pointer; } .v_content{ height:210px;width:100%; overflow:hidden; } .v_content_list{ position:relative; //关键,否则js的left属性会无效 } .v_content_list ul{ display:flex; width: 100%; } .v_content_list li{ flex:initial; //元素要在一行显示 min-width:120px; margin:10px 10px 10px 0; } .v_content_list img{ width:120px; height:150px; } </style> <body> <div class="v_show"> <div class="v_caption"> <h2>卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev">上一页</span> <span class="next">下一页</span> </div> <em>更多视频 >> </em> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li> <img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" /> <h4>二次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" /> <h4>二次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" /> <h4>二次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" /> <h4>二次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" /> <h4>二次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> <li> <img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" /> <h4>四次元播放</h4> <span>播放:<em>7777</em></span> </li> </ul> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var page=1; var i=4; $("span.next").click(function(){ $this=$(this); var $parent=$this.parents("div.v_show"); var $v_show=$parent.find("div.v_content_list"); //视频展示区域 var $v_content=$parent.find("div.v_content"); //视频展示区域外围div var v_width= $v_content.width(); var len=$v_show.find("li").length; var page_count=Math.ceil(len/i); //向上取整 if(!$v_show.is(":animated")){ //是否处于动画状态 //是否已经是最后一个版面,是直接跳到第一版 if(page==page_count){ $v_show.animate({left:'0px'},"slow"); page=1; }else{ $v_show.animate({left:'-='+v_width},"slow"); page++; } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); } }); $("span.prev").click(function(){ $this=$(this); var $parent=$this.parents("div.v_show"); var $v_show=$parent.find("div.v_content_list"); //视频展示区域 var $v_content=$parent.find("div.v_content"); //视频展示区域外围div var v_width= $v_content.width(); var len=$v_show.find("li").length; var page_count=Math.ceil(len/i); //向上取整 if(!$v_show.is(":animated")){ //是否处于动画状态 if(page==1){ $v_show.animate({left:'-='+v_width*(page_count-1)},"slow"); page=page_count; }else{ $v_show.animate({left:'+='+v_width},"slow"); page--; } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); } }); }) </script> </body> </html>