PhotoSlider-native js mobile development carousel image, album slide plug-in, photoslider-js
For details, click
Online Preview download now
Usage:
Reference css files and js files respectively, for example:
<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"></a></li>
<li><a href="http://www.j--d.com"></a></li>
<li><a href="http://www.j--d.com"></a></li>
Javascript:
Window. onload = function (){
PhotoSlide ({
Wrap: document. getElementById ('photo'), // The outermost container
Loop: true, // set a seamless loop
AutoPlay: true, // automatic carousel
AutoTime: 4000, // carousel Interval
Pagination: true // point status list
});
}
Complete example:
<! 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-pure js mobile development carousel images and album slide plug-ins </title>
<Meta name = "keywords" content = "javascript mobile album carousel image finger slide plug-in"/>
<Meta name = "description" content = "javascript mobile album slideshow finger slide plug-in, supports custom slideshow image slide attributes"/>
<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 = "boune3"> </div>
</Div>
<Ul id = "pic-view" class = "pic-view">
<Li> <a href = "http://www.j--d.com"> </a> </li>
<Li> <a href = "http://www.j--d.com"> </a> </li>
<Li> <a href = "http://www.j--d.com"> </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>
Please scan the QR code for the mobile phone preview:
Online Preview download now
Learning Source: http://www.j--d.com/html/349.html
For more special effects, click
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
