js實現(xiàn)支持手機滑動切換的輪播圖片效果實例
更新時間：2015年04月29日 11:55:54 作者：田想兵
這篇文章主要介紹了js實現(xiàn)支持手機滑動切換的輪播圖片效果,實例分析了javascript實現(xiàn)圖片切換的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)支持手機滑動切換的輪播圖片效果的方法。分享給大家供大家參考。具體如下：
運行效果如下：
完整實例代碼點擊此處本站下載。
使用方法案例:
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/carousel-image.js"></script>
<script>
$('.carousel-image').CarouselImage({
num :$('.carousel-num')
});
</script>
或者requirejs：
<div class="carousel-image">
<div>
<a>
<img src="http://www.yoursiteweb.com/images/1430073193462.jpg"/>
</a>
<a>
<img src="http://www.yoursiteweb.com/images/1430073252953.png"/>
</a>
<a>
<img src="http://www.yoursiteweb.com/images/1430073111420.jpg"/>
</a>
</div>
<div class="carousel-num">
</div>
</div>
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/require.js"></script>
<script>
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: '../src',
paths: {
$: 'zepto'
}
});
require(['carousel-image',"$"], function(CarouselImage,$) {
var cs = new CarouselImage();
cs.init({
target:$('.carousel-image'),
num:$('.carousel-num')
});
});
</script>
API 屬性、方法及回調(diào)：
target:
表示是在這個容器內(nèi)的元素會觸發(fā)事件,它應(yīng)該有個子級的容器，方便動畫的優(yōu)化
num:
本意是以顯示當前索引的數(shù)字表示，但現(xiàn)在用樣式把數(shù)字隱藏了，如果要顯示數(shù)字樣式，可自行更改樣式文件
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了js獲取今天、昨天、明天的日期函數(shù)代碼,需要的朋友可以參考下2023-05-05
超出JavaScript安全整數(shù)限制的數(shù)字計算BigInt詳解
這篇文章給大家分享了超出JavaScript安全整數(shù)限制的數(shù)字計算BigInt的相關(guān)知識點，有興趣的朋友參考學(xué)習(xí)下。2018-06-06
一款十分簡單的原生js實現(xiàn)的隨機點菜代碼，點擊點菜按鈕隨機點取上面菜單的菜品，可根據(jù)需求改成自己需要功能，比如說隨機點名。感興趣的朋友來參考實現(xiàn)代碼吧2019-12-12
本文給大家分享一段js代碼實現(xiàn)搜索框文字可刪除功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2016-12-12
移動Web中圖片自適應(yīng)的兩種JavaScript解決方法
這篇文章主要介紹了移動Web中圖片自適應(yīng)的兩種JavaScript解決方法,本文針對手機站點中的圖片自適應(yīng)問題,給出了圖集解決方法和單篇文章的解決方法,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了js如何清空form表單中的內(nèi)容，下面有個不錯的示例，大家可以參考下2014-05-05
仿服務(wù)器端腳本方式的JS模板實現(xiàn)方法...2007-04-04
JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡單的應(yīng)用
這篇文章主要介紹了JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡單的應(yīng)用,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JavaScript中聲明全局變量三種方式的異同。變量及變量聲明是一門語言最基本的概念，初學(xué)者都會很快掌握。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
javascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實例
下面小編就為大家?guī)硪黄猨avascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09