Home >Web Front-end >JS Tutorial >The jQuery plug-in Elastislide implements responsive focus map seamless scrolling switching effects_jquery

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

WBOY
WBOYOriginal
2016-05-16 16:04:451411browse

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" /> 

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> 

3. Function call

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

View DEMO Download

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

Statement:
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