標籤：style blog http java color strong
<!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 rel="stylesheet" href="style.css" type="text/css" /><style type="text/css">*{ margin:0; padding:0;}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{ list-style:none;}img{ border:none;} .v_show{ width:595px; margin:20px 0 1px 60px;}.v_caption{ height:35px; overflow:hidden; background:url(images/btn_cartoon.gif) no-repeat 0 0;}.v_caption h2{ float:left; width:84px; height:35px; overflow:hidden; background:url(images/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(images/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(images/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;}.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;}.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;}</style> </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="images/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="images/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="images/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="images/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="images/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="images/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="images/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="images/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="images/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="images/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="images/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="images/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="images/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li> </ul> </div> </div> </div></body></html>
$(function(){ var page = 1; var i = 4; $("span.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"); } }); $("span.prev").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"); } });})
看起來代碼很多很複雜，但其實思路很簡單，就是擷取左右按鈕，綁定單擊事件，
在事件裡面，再判斷圖片展示框的位置，然後切換到要切換的位置，這個可以通過
改變obj.style.left屬性實現，那怎麼知道要移動多少呢？可以擷取他實際的展示框
寬度，再定義一個計數器，標明已移動到的位置，兩者相乘，就是最後實際上的位
置。還是直接通過代碼解釋吧。
window.onload = function(){ var next = getElementsByClassName("next")[0]; //擷取下一頁按鈕 var prev = getElementsByClassName("prev")[0]; //擷取上一頁按鈕 var v_content = getElementsByClassName("v_content")[0]; //擷取展示框，方便在下面取得它的寬度 var v_list = getElementsByClassName("v_content_list")[0]; //實際存放所有圖片的容器 var v_span = getElementsByClassName("highlight_tip")[0].getElementsByTagName("span"); //裝飾標識 var v_width = v_content.clientWidth; //得到展示框的寬度 var i = 4; //每次展示的圖片數，這裡是4 var len = document.getElementsByTagName("li").length; //擷取圖片總數 var pageCount = Math.ceil(len/i); //圖片總數除以每次展示的圖片數，可以得出總共需要展示多少次 var page = 0; //預設設定為第0頁 var t; //計時器控制代碼，用於清除計時器 next.onclick = function(){ if(t){ clearInterval(t); //如果存在，也就是說，動畫有執行過，先清除，以免與下面的要執行的動畫造成衝突或者形成動畫排隊效果 } if(page == pageCount - 1){ //當到達最後一頁時，將動畫移動到最後，並將頁數標識設定為初始0 t = animate(v_list,{left:v_list.offsetLeft},{left:-v_list.offsetLeft - 0},500,Quad); page = 0; }else{ page++; //否則，當前頁面自增1，下面進行動畫移動 t = animate(v_list,{left:v_list.offsetLeft},{left:(-page * v_width - v_list.offsetLeft)},500,Quad); } for(var i = 0,l = v_span.length; i < l; i++){ //迴圈遍曆標識，並設定標識 v_span[i].className = ‘‘; } v_span[page].className = "current"; } prev.onclick = function(){ //同上 if(t){ clearInterval(t); } if(page == 0){ t = animate(v_list,{left:v_list.offsetLeft},{left:(-pageCount + 1) * v_width},500,Quad); page = 3; }else{ page--; t = animate(v_list,{left:v_list.offsetLeft},{left:(-page * v_width - v_list.offsetLeft)},500,Quad); } for(var i = 0,l = v_span.length; i < l; i++){ v_span[i].className = ‘‘; } v_span[page].className = "current"; }} function Quad(start,alter,curTime,dur){ return start+Math.pow(curTime/dur,2)*alter; //動畫演算法函數}
function animate(obj,start,alter,dur,fx){ // 【動畫執行函數】 var curTime = 0; var interval = setInterval(function(){ if(curTime >= dur){ clearInterval(interval); } for(var i in start){ obj.style[i] = fx(start[i],alter[i],curTime,dur) + "px"; } curTime += 50; },50); return interval;} function getElementsByClassName(className,node){ //通過類名擷取節點函數 node = node || document; if(node.getElementsByClassName){ return node.getElementsByClassName(className); } var eles = node.getElementsByTagName(‘*‘); var reg = []; for(var i = 0,l = eles.length; i < l; i++){ if(hasClass(className,eles[i])){ reg.push(eles[i]); } } return reg;} function hasClass(className,node){ //判斷有無某類名函數，在此是上面的函數需要 var eles = node.className.split(/\s+/); for(var i = 0,l = eles.length; i < l; i++){ if(eles[i] == className){ return true; } } return false;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
