基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動(dòng)
更新時(shí)間：2013年04月11日 14:44:01 作者：
點(diǎn)擊左右按鈕圖片橫向滾動(dòng)jquery，一次滾動(dòng)四個(gè)，圖片滾動(dòng)完成，自動(dòng)回到第一個(gè)版面，效果相當(dāng)不錯(cuò)，感興趣的前端工程師們可以參考下
點(diǎn)擊左右按鈕圖片橫向滾動(dòng)jquery，一次滾動(dòng)四個(gè)，圖片滾動(dòng)完成，自動(dòng)回到第一個(gè)版面：
效果圖如下：
<!DOCTYPE html>
<html lange="en">
<head>
<title>點(diǎn)擊左右按鈕圖片橫向滾動(dòng)</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;//每版四個(gè)圖片
//向右滾動(dòng)
$(".next").click(function(){ //點(diǎn)擊事件
var v_wrap = $(this).parents(".scroll"); // 根據(jù)當(dāng)前點(diǎn)擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區(qū)域
var v_cont = v_wrap.find(".box"); //找到視頻展示區(qū)域的外圍區(qū)域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的視頻圖片個(gè)數(shù)
var page_count = Math.ceil(len/i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
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++;
}
}
});
//向左滾動(dòng)
$(".prev").click(function(){ //點(diǎn)擊事件
var v_wrap = $(this).parents(".scroll"); // 根據(jù)當(dāng)前點(diǎn)擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區(qū)域
var v_cont = v_wrap.find(".box"); //找到視頻展示區(qū)域的外圍區(qū)域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的視頻圖片個(gè)數(shù)
var page_count = Math.ceil(len/i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
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>
效果圖如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lange="en">
<head>
<title>點(diǎn)擊左右按鈕圖片橫向滾動(dòng)</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;//每版四個(gè)圖片
//向右滾動(dòng)
$(".next").click(function(){ //點(diǎn)擊事件
var v_wrap = $(this).parents(".scroll"); // 根據(jù)當(dāng)前點(diǎn)擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區(qū)域
var v_cont = v_wrap.find(".box"); //找到視頻展示區(qū)域的外圍區(qū)域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的視頻圖片個(gè)數(shù)
var page_count = Math.ceil(len/i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
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++;
}
}
});
//向左滾動(dòng)
$(".prev").click(function(){ //點(diǎn)擊事件
var v_wrap = $(this).parents(".scroll"); // 根據(jù)當(dāng)前點(diǎn)擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區(qū)域
var v_cont = v_wrap.find(".box"); //找到視頻展示區(qū)域的外圍區(qū)域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的視頻圖片個(gè)數(shù)
var page_count = Math.ceil(len/i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
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>
您可能感興趣的文章:
- 多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼
- jQuery循環(huán)滾動(dòng)展示代碼 可應(yīng)用到文字和圖片上
- JQuery循環(huán)滾動(dòng)圖片代碼
- 利用jQuery簡(jiǎn)單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動(dòng)功能(示例代碼)
- 基于jQuery的圖片左右無(wú)縫滾動(dòng)插件
- jquery 單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼
- 基于jQuery圖片平滑連續(xù)滾動(dòng)插件
- js jquery做的圖片連續(xù)滾動(dòng)代碼
- jquery實(shí)現(xiàn)圖片左右間隔滾動(dòng)特效(可自動(dòng)播放)
- jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動(dòng)
相關(guān)文章
jQuery Ajax異步處理Json數(shù)據(jù)詳解
jquery ajax處理json數(shù)據(jù)其實(shí)與其它ajax處理數(shù)據(jù)沒(méi)什么很大的改動(dòng)，我們只要簡(jiǎn)單處理一下ajax部份的dataType數(shù)據(jù)類型等于json即可解決了2013-11-11
jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹
這篇文章主要介紹了jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹,本文首先講解了ajaxFileUpload的參數(shù)、錯(cuò)誤提示等知識(shí),然后給出了簡(jiǎn)單使用實(shí)例和ASP.NET MVC模式下的使用實(shí)例,需要的朋友可以參考下2015-05-05
css()方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性,下面有幾個(gè)不錯(cuò)的示例，大家可以感受下2014-01-01
jQuery簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)選項(xiàng)卡特效
本文給大家分享一段基于jQuery簡(jiǎn)單實(shí)現(xiàn)的網(wǎng)頁(yè)選項(xiàng)卡代碼，非常簡(jiǎn)單實(shí)用，這里推薦給小伙伴們。2014-11-11
jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D雙柱狀圖效果,涉及jQuery使用插件FusionCharts結(jié)合xml數(shù)據(jù)繪制的3D雙柱狀圖的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
jQuery?獲取與設(shè)置元素屬性的詳細(xì)方法(看完這篇文章就搞明白了)
這篇文章帶領(lǐng)大家熟練掌握?jQuery?的屬性方面的操作，包括固有屬性的獲取與設(shè)置，自定義屬性的獲取與設(shè)置等等，走進(jìn)?jQuery?的更深層次階段，這也是腳本之家小編發(fā)現(xiàn)的一篇比較實(shí)用的文章2023-06-06
JQuery居然沒(méi)有操作cookie相關(guān)的函數(shù)，搜了下官方有個(gè)cookie的插件。2010-04-04
jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼
今天的內(nèi)容是關(guān)于表單驗(yàn)證插件的制作。表單驗(yàn)證控件實(shí)現(xiàn)的主要功能是，當(dāng)表單提交的時(shí)候檢查必填項(xiàng)是否正確填寫，同時(shí)根據(jù)需要驗(yàn)證輸入信息是否符合規(guī)范2012-08-08
Validform+layer實(shí)現(xiàn)漂亮的表單驗(yàn)證特效
創(chuàng)建一個(gè)JavaScript表單驗(yàn)證插件，可以說(shuō)是一個(gè)繁瑣的過(guò)程，涉及到初期設(shè)計(jì)、開(kāi)發(fā)與測(cè)試等等環(huán)節(jié)。實(shí)際上一個(gè)優(yōu)秀的程序員不僅是技術(shù)高手，也應(yīng)該是善假于外物的。本文就給大家結(jié)合2款優(yōu)秀的插件來(lái)實(shí)現(xiàn)這個(gè)問(wèn)題，有需要的小伙伴可以參考下2016-01-01
jQuery 中使用JSON的實(shí)現(xiàn)代碼
json 是 Ajax 中使用頻率最高的數(shù)據(jù)格式，在瀏覽器和服務(wù)器中之間的通訊可離不開(kāi)它2011-12-12