快捷導(dǎo)航

js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例

更新時(shí)間：2015年04月29日 11:55:54 作者：田想兵

這篇文章主要介紹了js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果,實(shí)例分析了javascript實(shí)現(xiàn)圖片切換的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果的方法。分享給大家供大家參考。具體如下：

運(yùn)行效果如下：

完整實(shí)例代碼點(diǎ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:
表示是在這個(gè)容器內(nèi)的元素會(huì)觸發(fā)事件,它應(yīng)該有個(gè)子級(jí)的容器，方便動(dòng)畫的優(yōu)化

num:
本意是以顯示當(dāng)前索引的數(shù)字表示，但現(xiàn)在用樣式把數(shù)字隱藏了，如果要顯示數(shù)字樣式，可自行更改樣式文件

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js獲取今天、昨天、明天的日期函數(shù)代碼
這篇文章主要介紹了js獲取今天、昨天、明天的日期函數(shù)代碼,需要的朋友可以參考下
2023-05-05
超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt詳解
這篇文章給大家分享了超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt的相關(guān)知識(shí)點(diǎn)，有興趣的朋友參考學(xué)習(xí)下。
2018-06-06
原生js實(shí)現(xiàn)隨機(jī)點(diǎn)餐效果
一款十分簡單的原生js實(shí)現(xiàn)的隨機(jī)點(diǎn)菜代碼，點(diǎn)擊點(diǎn)菜按鈕隨機(jī)點(diǎn)取上面菜單的菜品，可根據(jù)需求改成自己需要功能，比如說隨機(jī)點(diǎn)名。感興趣的朋友來參考實(shí)現(xiàn)代碼吧
2019-12-12
JS實(shí)現(xiàn)搜索框文字可刪除功能
本文給大家分享一段js代碼實(shí)現(xiàn)搜索框文字可刪除功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2016-12-12
移動(dòng)Web中圖片自適應(yīng)的兩種JavaScript解決方法
這篇文章主要介紹了移動(dòng)Web中圖片自適應(yīng)的兩種JavaScript解決方法,本文針對(duì)手機(jī)站點(diǎn)中的圖片自適應(yīng)問題,給出了圖集解決方法和單篇文章的解決方法,需要的朋友可以參考下
2015-06-06
js清空form表單中的內(nèi)容示例
這篇文章主要介紹了js如何清空form表單中的內(nèi)容，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-05-05
仿服務(wù)器端腳本方式的JS模板實(shí)現(xiàn)方法
仿服務(wù)器端腳本方式的JS模板實(shí)現(xiàn)方法...
2007-04-04
JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡單的應(yīng)用
這篇文章主要介紹了JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡單的應(yīng)用,需要的朋友可以參考下
2017-06-06
探討JavaScript中聲明全局變量三種方式的異同
這篇文章主要介紹了JavaScript中聲明全局變量三種方式的異同。變量及變量聲明是一門語言最基本的概念，初學(xué)者都會(huì)很快掌握。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
javascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實(shí)例
下面小編就為大家?guī)硪黄猨avascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09