jQuery学习记录3
这次是一个类似优酷首页那种滑动效果的简单实现
主要用到两个div 一个用作画布，一个用作胶卷，画布要设置overflow，胶卷要设置width足够大
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jQuery.js"> </script> <script> $(document).ready(function(){ var page=1; var i=4; $("input.next").click(function(){ var $parent=$(this).parents("div.v_show"); var $v_show=$parent.find("div.v_content_list");//获取胶圈 var $v_content=$parent.find("div.v_content");//获取画布 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"); }) $("input.prew").click(function(){ var $parent=$(this).parents("div.v_show"); var $v_show=$parent.find("div.v_content_list"); var $v_content=$parent.find("div.v_content"); 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> <style type="text/css"> .current{ color:#009FAA; } li{ float:left;/*使元素平铺*/ width:170px; } .v_content{ width:680px; height:125px; overflow:hidden;/*如果里面的元素超出，则隐藏超出的部分，而不是扩展自己*/ } .v_content_list{ position:relative; width:200000px;/*画布的长度要足够长*/ } ul{ padding:0px; margin-left:0px;/*设置li元素没有初始偏移*/ } </style> </head> <body> <ul> <div class="v_show"> <div class="v_caption"> <h1 class="cartoon">示例：</h1> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span> </div> <div class="change_btn"> <input type="button" class="prew" value="11"></input> <input type="button" class="next" value="22"></input> </div> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li><img src="../img/adminBK.jpg" width="150" height="125">1</li> <li><img src="../img/adminBK.jpg" width="150" height="125">2</li> <li><img src="../img/adminBK.jpg" width="150" height="125">3</li> <li><img src="../img/adminBK.jpg" width="150" height="125">4</li> <li><img src="../img/adminBK.jpg" width="150" height="125">5</li> <li><img src="../img/adminBK.jpg" width="150" height="125">6</li> <li><img src="../img/adminBK.jpg" width="150" height="125">7</li> <li><img src="../img/adminBK.jpg" width="150" height="125">8</li> <li><img src="../img/adminBK.jpg" width="150" height="125">9</li> <li><img src="../img/adminBK.jpg" width="150" height="125">10</li> <li><img src="../img/adminBK.jpg" width="150" height="125">11</li> <li><img src="../img/adminBK.jpg" width="150" height="125">12</li> </ul> </div> </div> </div> </ul> </body>
