Jquery implements simple automatic playback of slides _ jquery

This article mainly introduces jquery's implementation of simple automatic playback slide effects, and introduces in detail the html page layout, css style settings, and jQuery's related techniques for controlling automatic playback of slides, for more information about jquery, see the following example. Share it with you for your reference. The specific implementation method is as follows:

Html section:

  
     
  
     
  
   Pretty cool eh? This slide is proof the content can be anything.  

CSS section:

/* Slides need to be absolutely positioned within the wrapper.This has a tiny bit of extra pizazz: */#slideshow {  margin: 50px auto;  position: relative;  width: 240px;  height: 240px;  padding: 10px;  box-shadow: 0 0 20px rgba(0,0,0,0.4);}#slideshow > p {  position: absolute;  top: 10px;  left: 10px;  right: 10px;  bottom: 10px;}

JQuery section:

//Run after DOM is ready.$("#slideshow > p:gt(0)").hide();setInterval(function() { $('#slideshow > p:first')  .fadeOut(1000)  .next()  .fadeIn(1000)  .end()  .appendTo('#slideshow');}, 3000);

I hope this article will help you with jQuery programming.