锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } body { font-size: 12px; } .v_show { width: 592px; margin: 20px 0px 0 30px; border: 1px solid #ccc; } .v_caption { width: 592px; height: 40px; line-height: 40px; overflow: hidden; background: url("images/btn_cartoon.gif") repeat-x; } .cartoon { float: left; width: 85px; margin-right: 10px; background: url("images/btn_cartoon.gif") 0px -100px no-repeat; text-indent: -9999px; } .highlight_tip { float: left; padding-top: 16px; margin-right: 10px } .highlight_tip span.current { background: url("images/btn_cartoon.gif") 0px -220px; } .highlight_tip span { display: inline; float: left; width: 7px; height: 7px; overflow: hidden; margin: 0 2px; background: url(images/btn_cartoon.gif) no-repeat 0 -320px; text-indent: -9999px; } .change_btn { float: left; overflow: hidden; width: 65px; padding-top: 8px; } .change_btn span.prev { display: block; float: left; width: 30px; height: 23px; background: url("images/btn_cartoon.gif") 0px -400px no-repeat; text-indent: -9999px; } .change_btn span.next { display: block; float: left; width: 30px; height: 23px; background: url("images/btn_cartoon.gif") -30px -400px no-repeat; text-indent: -9999px; } .v_caption em { float: right; padding-right: 10px; } .v_caption em a { font-size: 12px; text-decoration: none; color: #2B93D2; } .v_content { position: relative; height: 160px; overflow: hidden; } .v_content_list { height: 160px; width: 2500px; position: absolute; left: 0; top: 0; } .v_content_list ul { list-style: none; } .v_content_list li { float: left; margin: 10px 5px 0; padding: 5px; } .v_content_list li a { display: block; width: 128px; height: 80px; overflow: hidden; } .v_content_list h4 { margin-top: 10px; color: #2B93D2; } </style> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function () { var page = 1;//初始版面为1 var i = 4;//每个版面放四张图片 $(".next").click(function () { var $parent = $(this).parents(".v_show"); var $contentlist = $parent.find(".v_content_list"); var $content = $parent.find(".v_content");//left位置要变换的盒子 var v_width = $content.width();//获取到盒子的宽度 var len = $contentlist.find("li").length;//获取到li的个数 var pagecount = Math.ceil(len / i);//最多能够放四张版面 if(!$contentlist.is(":animated")){ if(page==pagecount){//若是第四个版面 $contentlist.animate({left: '0px'}, "slow")//改变left位置，返回为第一个版面 page=1; }else{ $contentlist.animate({left: '-=' + v_width}, "slow")//v_width向左减宽度 page++; } } $(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current"); }) $(".prev").click(function () { var $parent = $(this).parents(".v_show"); var $contentlist = $parent.find(".v_content_list"); var $content = $parent.find(".v_content"); var v_width = $content.width(); var len = $contentlist.find("li").length; var pagecount = Math.ceil(len / i); if(!$contentlist.is(":animated")){ if(page==1){ $contentlist.animate({left: '-='+v_width*(pagecount-1)}, "slow");//改变为第四个版面 page=4; }else{ $contentlist.animate({left: '+=' + v_width}, "slow") page--; } } $(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current") }) }) </script> <script></script> </head> <body> <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" alt="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">0</span><span>1</span><span>2</span><span>3</span> </div> <div class="change_btn"> <span class="prev">上一个</span><span class="next">下一个</span> </div> <em><a href="#">更多>></a></em> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li><a href="#"><img src="images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li> <li><a href="#"><img src="images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li> </ul> </div> </div> </div> </body> </html>
