Home > Article > Web Front-end > jquery slideshow special effects code with animation effect_jquery

jquery slideshow special effects code with animation effect_jquery

WBOYOriginal: 2016-05-16 15:42:121168browse

The example in this article describes the jquery slideshow plug-in devrama.slider with animation effects. Share it with everyone for your reference. The details are as follows:
The jquery slideshow plug-in devrama.slider with animation effects can embed HTML content and text animation effects in the focus image. When running, a cascading display effect of graphics and text can appear, and there is a progress bar effect below the picture.
运行效果图： -------------------查看效果下载源码----------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The jquery slideshow special effects code with animation effect shared with you is as follows

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery带动画效果幻灯片插件devrama.slider</title>
<link rel="stylesheet" href="css/lrtk.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
<style type="text/css">
 .example-animation {
 color: #FFF;
 font-size: 60px;
 }
</style>
</head>
<body>
<!-- 代码 开始 -->
<div class="example-animation">
 <div data-lazy-background="images/1.jpg">
 <h3 data-pos="['0%', '110%', '0%', '5%']" data-duration="700" data-effect="move">
 Moving
 </h3>
 <div data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move">
 Text
 </div>
 <div data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move">
 and Image
 </div>
 <div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move">
 <img data-lazy-src="images/add.jpg"/>
 </div>
 </div>
 <div data-lazy-background="images/2.jpg">
 <h3 data-pos="['0%', '8%']" data-duration="1000" data-effect="fadein">
 Fadein
 </h3>
 <div data-pos="['44%', '15%']" data-duration="700" data-effect="fadein">
 Text
 </div>
 <div data-pos="['66%', '11%']" data-duration="700" data-effect="fadein">
 and Image
 </div>
 <div data-pos="['29%', '46%']" data-duration="700" data-delay="500" data-effect="fadein">
 <img data-lazy-src="images/add.jpg"/>
 </div>
 </div> 
</div>
<script type="text/javascript">
$(document).ready(function(){
 $('.example-animation').DrSlider(); //Yes! that's it!
});
</script>
<!-- 代码 结束 -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

The above is the jquery slideshow special effect code with animation effect shared with you. I hope you can 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

Previous article：Early sliding door menu effect code implemented in js_javascript skillsNext article：Early sliding door menu effect code implemented in js_javascript skills

See more

jquery slideshow special effects code with animation effect_jquery

Related articles