DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jquery實現點擊左右按鈕圖片橫向滾動
基於jquery實現點擊左右按鈕圖片橫向滾動
編輯:JQuery特效代碼     
點擊左右按鈕圖片橫向滾動jquery,一次滾動四個,圖片滾動完成,自動回到第一個版面:
效果圖如下

. 代碼如下:
<!DOCTYPE html>
<html lange="en">
<head>
<title>點擊左右按鈕圖片橫向滾動</title>
<meta charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.box {height:66px; float:left; width:440px; overflow: hidden; position:relative; }
.box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center; cursor:pointer;}
.box li:hover { color:#999; }
.box li.active { background-position:-174px 0; color:#555;cursor:default;}
a.prev, a.next {background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
.scroll_list{ width:10000em; position:absolute; }
</style>
<!-- 引入jQuery -->
<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var page= 1;
var i = 4;//每版四個圖片
//向右滾動
$(".next").click(function(){ //點擊事件
var v_wrap = $(this).parents(".scroll"); // 根據當前點擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區域
var v_cont = v_wrap.find(".box"); //找到視頻展示區域的外圍區域
var v_width = v_cont.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++;
}
}
});
//向左滾動
$(".prev").click(function(){ //點擊事件
var v_wrap = $(this).parents(".scroll"); // 根據當前點擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區域
var v_cont = v_wrap.find(".box"); //找到視頻展示區域的外圍區域
var v_width = v_cont.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--;
}
}
});
});
</script>
</head>
<body>
<!-- 例子 -->
<div class="scroll" style="margin:0 auto;width:550px;">
<!-- "prev page" link -->
<a class="prev" href="#"></a>
<div class="box">
<div class="scroll_list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
<!-- "next page" link -->
<a class="next" href="#"></a>
</div>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved