Home >Web Front-end >JS Tutorial >js exquisite slideshow special effects code sharing_javascript skills

js exquisite slideshow special effects code sharing_javascript skills

WBOYOriginal: 2016-05-16 15:41:411404browse

The example in this article describes the creation of exquisite slideshow special effects using js. Share it with everyone for your reference. The details are as follows:
This is a plug-in with special effects for a beautiful slideshow based on JavaScript, which is different from other slideshows. Why is there a difference? Because the image switching of this plug-in includes 4 directions, that is, it is also possible to switch up, down, left, and right. You can use it in the example.
Operation rendering: -------------------View the effect Download the source code---------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.

Key code for this example:

var o = {
 init: function(){
 this.portfolio.init();
 },
 portfolio: {
 data: {
 },
 init: function(){
  $('#portfolio').portfolio(o.portfolio.data);
 }
 }
}
 
$(function(){ o.init(); });

The js exquisite slideshow special effects code shared with you is as follows

<!doctype html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>js精美的幻灯片画集特效</title>
 <link rel="shortcut icon" href="../favicon.ico">
 <meta name="description" content="Portfolio Image Navigation with jQuery" />
 <meta name="keywords" content="jquery, plugin, navigation, portfolio, images, 2d, scroll to, template" />
 <meta name="author" content="Marcin Dziewulski for Codrops" />
 <link href='http://fonts.googleapis.com/css&#63;family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/portfolio.js" type="text/javascript"></script>
 <script src="js/init.js" type="text/javascript"></script>
 </head>
 <body>
 
 <div id="portfolio">
 <div id="background"></div> 
 <div class="arrows">
 <a href="#" class="up">Up</a>
 <a href="#" class="down">Down</a>
 <a href="#" class="prev">Previous</a>
 <a href="#" class="next">Next</a>
 </div>
 <div class="gallery">
 <div class="inside">
 <div class="item">
 <div><img src="images/1.jpg" alt="js exquisite slideshow special effects code sharing_javascript skills" /></div>
 <div><img src="images/2.jpg" alt="image2" /></div>
 <div><img src="images/3.jpg" alt="image3" /></div>
 </div>
 <div class="item">
 <div><img src="images/4.jpg" alt="image4" /></div>
 <div><img src="images/5.jpg" alt="image5" /></div>
 </div>
 <div class="item">
 <div><img src="images/6.jpg" alt="image6" /></div>
 <div><img src="images/7.jpg" alt="image7" /></div>
 <div><img src="images/8.jpg" alt="image8" /></div>
 <div><img src="images/9.jpg" alt="image9" /></div>
 <div><img src="images/10.jpg" alt="js exquisite slideshow special effects code sharing_javascript skills0"/></div>
 <div><img src="images/11.jpg" alt="js exquisite slideshow special effects code sharing_javascript skills1"/></div>
 </div>
 <div class="item">
 <div><img src="images/12.jpg" alt="js exquisite slideshow special effects code sharing_javascript skills2"/></div>
 <div><img src="images/13.jpg" alt="js exquisite slideshow special effects code sharing_javascript skills3"/></div>
 <div><img src="images/14.jpg" alt="js exquisite slideshow special effects code sharing_javascript skills4"/></div>
 <div><img src="images/15.jpg" alt="js exquisite slideshow special effects code sharing_javascript skills5"/></div>
 </div>
 </div>
 </div>
 </div>
 </body>
</html>

The above is the js exquisite slideshow special effects code shared with you. I hope you will 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：jquery.mousewheel achieves full screen flipping effect_jqueryNext article：jquery.mousewheel achieves full screen flipping effect_jquery

See more

js exquisite slideshow special effects code sharing_javascript skills

Related articles