jquery實現(xiàn)的圖片點擊滾動效果
更新時間：2014年04月29日 16:01:24 作者：
這篇文章主要介紹了jquery實現(xiàn)的圖片點擊滾動效果,需要的朋友可以參考下
需要添加jquery文件才可以調(diào)試
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//alert($('#findclose').closest('div').attr('id'));
var pic_length = $('#gd li').length;
var n = 0;
$('#toleft').click(function(){
if (!$('#gd').is(':animated') && n)
{
$('#gd').animate({left:'+=120px'},500);
n--;
}
});
$('#toright').click(function(){
if (!$('#gd').is(':animated') && pic_length > n+5)
{
$('#gd').animate({left:'-=120px'},500);
n++;
}
});
})
</script>
<style type="text/css">
ul{
list-style:none;
margin:0px;
padding:0px;
text-align:center;
}
#gd li {
width:90px;
height:80px;
display:block;
float:left;
margin:9px 15px;
}
</style>
<div style="width:702px;height:100px;background:#ccc;margin:0 auto">
<div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toleft"></div>
<div style="width:600px;height:98px;float:left;border:1px solid #777;overflow: hidden;">
<ul style="list-style: none outside none;height:98px;display:block;background:yellow;position:relative;width:9999em;" id="gd">
<li style="background:red"></li>
<li style="background:orange"></li>
<li style="background:green"></li>
<li style="background:navy"></li>
<li style="background:blue"></li>
<li style="background:purple"></li>
<li style="background:pink"></li>
<li style="background:gray"></li>
</ul>
</div>
<div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toright"></div>
</div>
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//alert($('#findclose').closest('div').attr('id'));
var pic_length = $('#gd li').length;
var n = 0;
$('#toleft').click(function(){
if (!$('#gd').is(':animated') && n)
{
$('#gd').animate({left:'+=120px'},500);
n--;
}
});
$('#toright').click(function(){
if (!$('#gd').is(':animated') && pic_length > n+5)
{
$('#gd').animate({left:'-=120px'},500);
n++;
}
});
})
</script>
<style type="text/css">
ul{
list-style:none;
margin:0px;
padding:0px;
text-align:center;
}
#gd li {
width:90px;
height:80px;
display:block;
float:left;
margin:9px 15px;
}
</style>
<div style="width:702px;height:100px;background:#ccc;margin:0 auto">
<div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toleft"></div>
<div style="width:600px;height:98px;float:left;border:1px solid #777;overflow: hidden;">
<ul style="list-style: none outside none;height:98px;display:block;background:yellow;position:relative;width:9999em;" id="gd">
<li style="background:red"></li>
<li style="background:orange"></li>
<li style="background:green"></li>
<li style="background:navy"></li>
<li style="background:blue"></li>
<li style="background:purple"></li>
<li style="background:pink"></li>
<li style="background:gray"></li>
</ul>
</div>
<div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toright"></div>
</div>
相關(guān)文章
JS網(wǎng)頁在線獲取鼠標(biāo)坐標(biāo)值的方法
這篇文章主要介紹了JS網(wǎng)頁在線獲取鼠標(biāo)坐標(biāo)值的方法,涉及javascript操作頁面窗口位置元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
下面小編就為大家分享一篇js斷點調(diào)試心得，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)列表展開收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript仿淘寶實現(xiàn)固定右側(cè)側(cè)邊欄
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實現(xiàn)仿淘寶固定右側(cè)側(cè)邊欄效果，文中示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下2022-03-03
javascript數(shù)組中的reduce方法和pop方法
這篇文章主要介紹了javascript數(shù)組中的reduce方法和pop方法，文章內(nèi)容介紹詳細(xì)，具有一定的參考價值需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-03-03
本文主要介紹了tab欄切換的原理以及實現(xiàn)方法代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JS實戰(zhàn)篇之收縮菜單表單布局的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
今天小編就為大家分享一篇關(guān)于js變量聲明var使用與不使用的區(qū)別詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
百度有啊通欄展示大家并不陌生吧，下面與大家分享下具體的實現(xiàn)js代碼，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript中Promise類的使用方法，文中的示例代碼簡潔易懂，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2023-05-05