標籤：
簡單的移動端圖片滑動切換瀏覽外掛程式
分別引用css檔案和js檔案 如：
<link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /><script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script>
html部分:
<li><a href="http://www.j--d.com"><img src="img/1.jpg" /></a></li><li><a href="http://www.j--d.com"><img src="img/2.jpg" /></a></li><li><a href="http://www.j--d.com"><img src="img/3.jpg" /></a></li>
javascript初始化部分:
window.onload=function(){photoSlide({wrap: document.getElementById(‘photo‘),//最外層容器loop: true,//設定無縫迴圈autoPlay:true,//自動輪播autoTime:4000,//輪播時間間隔pagination:true //點狀態列表});}
完整樣本：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>photoSlider-純js移動開發輪播圖、相簿滑動外掛程式</title><meta name="keywords" content="javascript移動端相簿輪播圖手指滑動外掛程式" /><meta name="description" content="javascript移動端相簿輪播圖手指滑動外掛程式,支援自訂輪播圖滑動屬性" /><meta name=apple-mobile-web-app-title content="photoSlider"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name=renderer content=webkit><meta name="full-screen" content="yes"><meta name="browsermode" content="application"><meta name="x5-fullscreen" content="true"><meta name="x5-page-mode" content="app"><link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /></head><body><div id="photo"><div id="loading" class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div><ul id="pic-view" class="pic-view"><li><a href="http://www.j--d.com"><img src="img/1.jpg" /></a></li><li><a href="http://www.j--d.com"><img src="img/2.jpg" /></a></li><li><a href="http://www.j--d.com"><img src="img/3.jpg" /></a></li></ul></div></body></html><script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">document.onreadystatechange = subSomething;function subSomething() {if (document.readyState == ‘complete‘) {setTimeout(function(){var load=document.getElementById(‘loading‘);load.style.opacity=0;document.getElementById(‘pic-view‘).setAttribute(‘class‘,‘pic-view show‘);load.remove();},500);}}window.onload=function(){photoSlide({wrap: document.getElementById(‘photo‘),loop: true,autoPlay:true,autoTime:4000,pagination:true});}</script>
點擊線上預覽
photoSlider-html5原生js移動開發輪播圖-相簿滑動外掛程式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
