js實現(xiàn)點擊左右按鈕輪播圖片效果實例
更新時間：2015年01月29日 09:40:06 作者：comeonstone
這篇文章主要介紹了js實現(xiàn)點擊左右按鈕輪播圖片效果的方法,涉及click事件相應、animate方法等使用技巧,需要的朋友可以參考下
本文實例講述了js實現(xiàn)點擊左右按鈕輪播圖片效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
$(function () {
var index = 1;
var pPage = 1;
var $v_citemss = $(".citemss");
var $v_show = $v_citemss.find("ul");
v_width = $v_citemss.width();//圖片展示區(qū)外圍div的大小
//注：若為整數(shù)，前邊不能再加var，否則會被提示underfine
p_count = $v_citemss.find("li").length;//獲取此處li的個數(shù)
$(".slideprev1").click(function () {
if (!$v_show.is(":animated")) {
if (pPage == index) {
$v_show.animate({ right: '0px' }, "3000");
pPage = 4;
} else {
$v_show.animate({right: '-=' + v_width },"3000");
pPage--;
}
}
});
$(".slidenext").click(function () {
if (!$v_show.is(":animated")) {
if (pPage == p_count) {
$v_show.animate({ left: '0px' }, "3000");
pPage = 1;
} else {
$v_show.animate({ left: '-=' + v_width }, "3000");
pPage++;
}
}
});
});
對于鼠標懸浮上去，下方出現(xiàn)橫條描述、左右出現(xiàn)按鈕等效果，完全可以用css實現(xiàn)，不需要使用js來實現(xiàn)了。
具體操作：css中絕對或相對定位，left，right或bottom為負數(shù)，鼠標懸浮上去后，分別正確顯示，再設置一下transition，作為動畫的緩沖即可。
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
項目中有個保存二維碼到相冊的功能，所以涉及到用戶是否授權相冊權限的問題。這篇文章主要介紹了微信小程序實現(xiàn)保存圖片到相冊功能,需要的朋友可以參考下2018-11-11
Iceraven瀏覽器需要安裝Tampermonkey插件來安裝GF油猴腳本，本文給大家介紹手機安裝GreasyFork油猴js腳本的教程，安裝過程給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-12-12
JS實現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標放上展示信息)
下面小編就為大家分享一篇JS實現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標放上展示信息)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了javascrip+HTML5 Canvas繪制轉盤抽獎的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了微信小程序使用image組件顯示圖片的方法,結合實例形式簡單分析了微信小程序附image組件的相關使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JavaScript 動畫我們可以使用 JavaScript 來創(chuàng)建動態(tài)的圖像。實例 按鈕動畫 利用兩個不同的事件來驅動兩個相應的函數(shù),來切換兩張對應的圖片以創(chuàng)造出動畫效果。2015-06-06
JS小數(shù)運算出現(xiàn)多為小數(shù)問題的解決方法
這篇文章主要介紹了JS小數(shù)運算出現(xiàn)多為小數(shù)問題的解決方法,需要的朋友可以參考下2016-06-06
關于js window.location.href location.href parent.location.href top.location.href 的用法2010-05-05
實現(xiàn)在?Chrome?中執(zhí)行?JavaScript?代碼
這篇文章主要介紹了實現(xiàn)在?Chrome?中執(zhí)行?JavaScript?代碼，下面來介紹如何在?Chrome?中打開開發(fā)者工具，以及如何在開發(fā)者工具中運行調試?JavaScript?代碼，具有一的的參考價值,需要的朋友可以參考一下2022-03-03
JS OOP包機制,類創(chuàng)建的方法定義,需要的朋友可以參考下。2009-11-11