Jquery+css to achieve dynamic picture switching effect _jquery

The example of this article tells the JQUERY+CSS implementation of dynamic picture switching effect code. Share to everyone for your reference. Specifically as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

basic idea: define an array to store the pictures you want to show, then delete the ZoomIn class when you click the picture, add the Fadeoutright class, move the real graph to the right and disappear, register plus 1 (to call the next picture), When the picture is deleted for 500 milliseconds, determine if the picture is the last one, if so, set the register to 0, start with the first picture, delete the picture code, then create a new picture code and set SRC to the next picture, plus the Zoom animation style class animated ZoomIn, Animate the picture, then insert the new picture code before the P element.

Preferred introduction of CSS animation files and jquery library

<link rel= "stylesheet" href= "Css/animate.min.css"/> <script type= "Text/javascript" src= "js/jquery/"
1.11.1/jquery.min.js "></script>

Building a simple HTML

<div class= "Container" >
 <div class= "center animated" >
   
 

Plus some CSS, here at random, please adjust according to your own project

 . container {
   width:100vw;
   HEIGHT:100VH;
   Background-color: #fff;
   Position:absolute
  }
 
  . Center {
   width:600px;
   Margin-left:auto;
   Margin-right:auto;
   position:relative;
   top:50%;
   Transform:translatey ( -50%);
   Text-align:center;
 
   Background-image:url (images/banana.png);
   Background-position: -10000px,-10000px;
   Background-repeat:no-repeat
  }
 
  . Center H1 {
   margin:0px;
   padding:0px;
   Text-align:center;
   margin-bottom:50px;
   font-size:18px;
   Text-transform:uppercase
  }
 
  . Center p{
   padding-top:50px;
   Text-align:center;
   Color: #ccc;
   font-size:12px
 
  }
 
  . Center P a{
   Text-decoration:none;
   Color:inherit
  }
 
  . Center P a:hover{
   color: #222;
 
  Center img{
   Cursor:pointer;
  

Basic CSS positioning the entire page, animation is not affected by the above CSS.
Write JS to achieve animation effect

 var imgs=[//Defines the array of stored picture paths "Images/island_1x.png", "Images/banana.png", "images/rescued-illos_1x.png", "images /rivalry_1x.png "," Images/sir_crags_a_lot_1x.png "," Images/sf-cryptids_1x.png "," Images/db_space_1x.png "," ima
 Ges/xmas1_1x.png "]; var counter = 0; The Register of the picture (document). Ready (function () {$ (. Center). On ("click", "img", function () {//definition. Center Click Picture Event $ (this). Removec Lass ("ZoomIn"). AddClass ("Fadeoutright"); Delete the ZoomIn class that clicked the picture and add the Fadeoutright class counter++; Register plus 1 settimeout (function () {//500 milliseconds after this method if (counter==imgs.length) counter=0;//If the last picture is returned the first $ (". Center IMG "). Remove ();
    Delete Picture $ (" 

SOURCE download: Jquery+css to achieve dynamic picture switching effect source code

The above is jquery combined with CSS to achieve dynamic picture switching effect, sharing the code is very detailed, but also provides the basic ideas of the code, I hope you like, and can be used to apply.