一个滑动视频提示小功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){ var page = 1; var i = 4; $("span.next").bind('click', function(){ var $v_content = $(this).parents("div.v_show").find('.v_content'); var $v_show = $(this).parents("div.v_show").find('.v_content_list'); var v_width = $v_content.width(); var len = $v_content.find('.v_content_list').find("li").length; var pageCount = Math.ceil(len / i); if (!$v_show.is(':animated')) { if (page == pageCount) { $v_show.animate({ left: '0px' }, "slow"); page = 1; } else { $v_show.animate({ left: "-=" + v_width }, "slow"); page++; } } $(this).parents(".v_caption").find(".highlight_tip").find("span").removeClass("current").eq(page - 1).addClass('current'); }) $("span.prev").bind('click', function(){ var $v_content = $(this).parents("div.v_show").find('.v_content'); var $v_show = $(this).parents("div.v_show").find('.v_content_list'); var v_width = $v_content.width(); var len = $v_content.find('.v_content_list').find("li").length; var pageCount = Math.ceil(len / i); if (!$v_show.is(':animated')) { if (page == 1) { $v_show.animate({ left: "-=" + v_width * (pageCount - 1) }, "slow"); page = pageCount; } else { $v_show.animate({ left: "+=" + v_width }, "slow");page--; } $(this).parents(".v_caption").find(".highlight_tip").find("span").removeClass("current").eq(page - 1).addClass('current'); } }) }) </script> </head> <body> <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> <div class="v_show" style="margin-top:8px"> <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> </body></html>
页:
[1]