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