特效描述:两排图片 向左滚动。jquery两排图片向左滚动特效代码下载
代码结构
1. 引入CSS
<link href="css/style.css" type="text/css" rel="stylesheet" />
2. 引入JS
<script type="text/javascript" src="js/jquery.min.js"></script>
3. HTML代码
<br> <div class="scroll"> <div class="picbox"> <ul class="piclist mainlist"> <li class="goodlist"> <a href="https://www.51qianduan.com/">51前端</a> <div> <a href="https://www.51qianduan.com/">51前端</a> <span class="en">Bvland Malt Cream</span> <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p> <p><a href="https://www.51qianduan.com/">51前端</a></p> </div> </li> <li class="goodlist"> <a href="https://www.51qianduan.com/">51前端</a> <div> <a href="https://www.51qianduan.com/">51前端</a> <span class="en">Bvland Malt Cream</span> <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p> <p><a href="https://www.51qianduan.com/">51前端</a></p> </div> </li> <li class="goodlist"> <a href="https://www.51qianduan.com/">51前端</a> <div> <a href="https://www.51qianduan.com/">51前端</a> <span class="en">Bvland Malt Cream</span> <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p> <p><a href="https://www.51qianduan.com/">51前端</a></p> </div> </li> <li class="goodlist"> <a href="https://www.51qianduan.com/">51前端</a> <div> <a href="https://www.51qianduan.com/">51前端</a> <span class="en">Bvland Malt Cream</span> <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p> <p><a href="https://www.51qianduan.com/">51前端</a></p> </div> </li> <li class="goodlist"> <a href="https://www.51qianduan.com/">51前端</a> <div> <a href="https://www.51qianduan.com/">51前端</a> <span class="en">Bvland Malt Cream</span> <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p> <p><a href="https://www.51qianduan.com/">51前端</a></p> </div> </li> <li class="goodlist"> <a href="https://www.51qianduan.com/">51前端</a> <div> <a href="https://www.51qianduan.com/">51前端</a> <span class="en">Bvland Malt Cream</span> <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p> <p><a href="https://www.51qianduan.com/">51前端</a></p> </div> </li> <li class="goodlist"> <a href="https://www.51qianduan.com/">51前端</a> <div> <a href="https://www.51qianduan.com/">51前端</a> <span class="en">Bvland Malt Cream</span> <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p> <p><a href="https://www.51qianduan.com/">51前端</a></p> </div> </li> <li class="goodlist"> <a href="https://www.51qianduan.com/">51前端</a> <div> <a href="https://www.51qianduan.com/">51前端</a> <span class="en">Bvland Malt Cream</span> <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p> <p><a href="https://www.51qianduan.com/">51前端</a></p> </div> </li> </ul> <ul class="piclist swaplist"></ul> </div> <div class="og_prev"></div> <div class="og_next"></div> </div> <script type="text/javascript"> $(function(){ linum = $('.mainlist li').length;//图片数量 w = linum/2 * 232;//ul宽度 $('.piclist').css('width', w + 'px');//ul宽度 $('.swaplist').html($('.mainlist').html());//复制内容 $('.og_next').click(function(){ if($('.swaplist,.mainlist').is(':animated')){ $('.swaplist,.mainlist').stop(true,true); } if($('.mainlist li').length>4){//多于4张图片 ml = parseInt($('.mainlist').css('left'));//默认图片ul位置 sl = parseInt($('.swaplist').css('left'));//交换图片ul位置 if(ml<=0 && ml>w*-1){//默认图片显示时 $('.swaplist').css({left: '928px'});//交换图片放在显示区域右侧 $('.mainlist').animate({left: ml - 928 + 'px'},'slow');//默认图片滚动 if(ml==(w-928)*-1){//默认图片最后一屏时 $('.swaplist').animate({left: '0px'},'slow');//交换图片滚动 } }else{//交换图片显示时 $('.mainlist').css({left: '928px'})//默认图片放在显示区域右 $('.swaplist').animate({left: sl - 928 + 'px'},'slow');//交换图片滚动 if(sl==(w-928)*-1){//交换图片最后一屏时 $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动 } } } }) $('.og_prev').click(function(){ if($('.swaplist,.mainlist').is(':animated')){ $('.swaplist,.mainlist').stop(true,true); } if($('.mainlist li').length>4){ ml = parseInt($('.mainlist').css('left')); sl = parseInt($('.swaplist').css('left')); if(ml<=0 && ml>w*-1){ $('.swaplist').css({left: w * -1 + 'px'}); $('.mainlist').animate({left: ml + 928 + 'px'},'slow'); if(ml==0){ $('.swaplist').animate({left: (w - 928) * -1 + 'px'},'slow'); } }else{ $('.mainlist').css({left: (w - 928) * -1 + 'px'}); $('.swaplist').animate({left: sl + 928 + 'px'},'slow'); if(sl==0){ $('.mainlist').animate({left: '0px'},'slow'); } } } }); $('.goodlist').hover(function(){ $('.exchange',this).show(); },function(){ $('.exchange',this).hide(); }); }); </script>