首页 > 代码库 > 锋利的jQuery-4--图片切换的一个例子（自己理解后写的，以备忘记时看看）
锋利的jQuery-4--图片切换的一个例子（自己理解后写的，以备忘记时看看）
一个动画切换的效果，如图：
分析步骤：
1.点击左右的箭头图片滚动，左边的小点变化。
2.主要问题是当滚到最后一屏时切换回第一屏，第一屏在向前滚动是切换到最后一屏 ：通过判断图片的总数然后除以每屏显示的数量得到最大屏数，根据当前处于第几屏判断如何滚动。
3.左边的小点切换问题 ： 根据当前的屏数，通过eq()选中，因为eq()从0开始，所以要当前屏数 - 1 ，获取要显示的小点。
html部分的代码：
<div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</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><a href="#">更多>></a></em> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> </ul> </div> </div> </div>
主要通过css控制图片外围div(.v_content)和包裹图片的div(.v_content_list)的样式来控制图片的切换：
* { margin:0; padding:0; word-break:break-all; }body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }h1, h2, h3, h4, h5, h6 { font-size:1em; }a { color:#2B93D2; text-decoration:none; }a:hover { color:#E31E1C; text-decoration:underline; }ul, li { list-style:none; }fieldset, img { border:none; }/* v_show style */.v_show { width:595px; margin:20px 0 1px 60px; }.v_caption { height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; }.v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }.v_caption .cartoon { background-position: 0 -100px; }.v_caption .variety { background-position:-100px -100px; }.highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }.highlight_tip .current { background-position:0 -220px; }.change_btn { float:left; margin:7px 0 0 10px; }.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; }.change_btn .prev { background-position:0 -400px; }.change_btn .next { width:31px; background-position:-30px -400px; }.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }
/* 控制外围的div的position为relative，overflow为hidden,里边的div的position为absolute,这样才能控制里边的div滚动 */.v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }
.v_content ul {float:left;}.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }.v_content ul li img { width:128px; height:96px; }.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }.v_content ul li h4 a { display:inline !important; height:auto !important; }.v_content ul li span { color:#666; }.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }
jQuery代码：
$(function(){ var page = 1; //定义当前的页码 var i = 4; //定义每页显示的图片数量 $(".change_btn .next").click(function(){ //下一页按钮点击事件 var parent = $(this).parents("div.v_show"); //根据当前点击的元素获取到父元素 var content = parent.find("div.v_content"); //找到 "图片展示区域" 的外围div var content_list = parent.find("div.v_content_list"); //找到 "图片展示区域" 的div var sleft = content.css("width"); //获取外围div的宽度，以便控制图片滚动的宽度[css()获取到的是元素的样式宽度，带px。width()获取到的是元组在页面上的宽度，不带px] var imgNum = content_list.find("li").length; //获取图片的总数，以便计算最多有多少屏 var sumPage = Math.ceil(imgNum / i); //最大屏数，控制到最后一屏时回到第一屏，进一取整 if(page == sumPage){ content_list.stop(false,true).animate({"left" : 0}, 600); //如果当前是最后一屏，则回到第一屏 page = 1; //把当前页设为1 }else{ content_list.stop(false,true).animate({"left" : "-=" + sleft}, 600); //如果不是最后一屏，left值递减 page++ ; //当前页加1 } /* 根据当前的页数判断选定第几个span添加current类 */ parent.find(".highlight_tip").find("span").eq(page - 1).addClass("current").siblings().removeClass("current"); }); $(".change_btn .prev").click(function(){ //上一页按钮点击事件 var parent = $(this).parents("div.v_show"); var content = parent.find("div.v_content"); var content_list = parent.find("div.v_content_list"); var sleft = content.width(); var imgNum = content_list.find("li").length; var sumPage = Math.ceil(imgNum / i); if(page == 1){ content_list.stop(false,true).animate({"left" : -((sumPage-1) * sleft) + "px"}, 600); page = sumPage; }else{ content_list.stop(false,true).animate({"left" : "+=" + sleft}, 600); page-- ; } parent.find(".highlight_tip").find("span").eq(page - 1).addClass("current").siblings().removeClass("current"); }); });
完整代码下载：http://vdisk.weibo.com/s/aj5eU-ZwuaV0t
锋利的jQuery-4--图片切换的一个例子（自己理解后写的，以备忘记时看看）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。