Home > Web Front-end > JS Tutorial > body text

The jQuery plug-in Elastislide implements responsive focus map seamless scrolling switching effects_jquery

WBOY
Release: 2016-05-16 16:04:45
Original
1351 people have browsed it

Supports responsive jQuery focus image seamless scrolling switching special effects plug-in Elastislide, a very beautiful picture carousel special effects plug-in that supports left and right carousel pictures, up and down carousel pictures, adaptive mobile display, and supports numerous parameter configurations: orientation: 'horizontal' (horizontal switching), speed: 500 (switching speed in milliseconds), easing: 'ease-in-out' (animation effect), minItems: 3 (default number of displays), etc., browser compatibility : IE8 and more modern browsers can be used if you don’t mind lower version browsers. Of course, you can also use mobile touch screens.

Supports responsive jQuery focus image seamless scrolling switching special effects plug-in Elastislide

Usage:

1. Load jQuery and plug-ins

<script type="text/javascript" src="libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquerypp.custom.js"></script> 
<script type="text/javascript" src="js/jquery.elastislide.js"></script> 
<link rel="stylesheet" type="text/css" href="css/elastislide.css" /> 
Copy after login

2.HTML content

<ul id="carousel" class="elastislide-list"> 
<li><a href="#"><img src="images/small/1.jpg" alt="The jQuery plug-in Elastislide implements responsive focus map seamless scrolling switching effects_jquery" /></a></li> 
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 
</ul> 
Copy after login

3. Function call

<script type="text/javascript"> 
$(document).ready(function() { 
  $( '#carousel' ).elastislide(); 
}); 
</script> 
Copy after login

View DEMO Download

The above is the entire content of this article, I hope you all like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!