js實現點擊左右按鈕輪播圖片效果實例
更新時間：2015年01月29日 09:40:06 作者：comeonstone
這篇文章主要介紹了js實現點擊左右按鈕輪播圖片效果的方法,涉及click事件相應、animate方法等使用技巧,需要的朋友可以參考下
本文實例講述了js實現點擊左右按鈕輪播圖片效果的方法。分享給大家供大家參考。具體實現方法如下：
$(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的大小
//注：若為整數，前邊不能再加var，否則會被提示underfine
p_count = $v_citemss.find("li").length;//獲取此處li的個數
$(".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++;
}
}
});
});
對于鼠標懸浮上去，下方出現橫條描述、左右出現按鈕等效果，完全可以用css實現，不需要使用js來實現了。
具體操作：css中絕對或相對定位，left，right或bottom為負數，鼠標懸浮上去后，分別正確顯示，再設置一下transition，作為動畫的緩沖即可。
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
這篇文章主要為大家整理了關于Bootstrap導航的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
詳談innerHTML innerText的使用和區(qū)別
下面小編就為大家?guī)硪黄斦刬nnerHTML innerText的使用和區(qū)別。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了ES6中字符串string常用的新增方法,結合實例形式總結分析了ES6中字符串string常用的新增方法功能與使用技巧,需要的朋友可以參考下2017-11-11
HTML中Form表單的reset方法被用來清空用戶所輸入的內容，以前一直誤以為其是單純的將input等輸入項中的值清空2014-03-03
這篇文章主要介紹了使用JavaScript獲取電池狀態(tài)的方法,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了JavaScript實現音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Web跨域已是老生常談的話題，這次來嘗試下跨域瀏覽器進程之間的通信 —— 這在過去基本依靠網絡中轉實現2013-04-04
這篇文章主要介紹了javascript Array 數組常用方法 ,需要的朋友可以參考下2015-04-04
這篇文章介紹了驗證手機號碼的JS方法，有需要的朋友可以參考一下2013-09-09
在大型前端項目中,模塊路徑往往很長且復雜,使用相對路徑不僅降低了代碼可讀性,還增加了維護成本,Webpack提供了配置別名路徑的功能,可以通過為常用目錄定義簡短的別名,簡化模塊導入路徑,本文將詳細介紹如何在Webpack中配置別名路徑,需要的朋友可以參考下2025-03-03