Implementation of style and freshness based on JavaScript _javascript techniques for carousel effects

The example of this article for everyone to share the JavaScript implementation of the picture carousel effect, for your reference, the specific content as follows

First, the realization effect

As shown above:

1, the picture automatically rotate, each rotation to a picture, the following corresponding small icon appears red border, and display the corresponding picture name

2, the mouse to the big picture above, the picture stop rotation, always show the current picture; the mouse moved away after the picture continues to rotate

3, the mouse moved to the small icon, large picture area will show the corresponding large image; the mouse moves away from the current picture to continue to rotate

Second, the Code

<! DOCTYPE html>  

Three, many pictures rotation debugging notes

JS Source code:

Realize a few pictures of the rotation of
var num = 0;  The number of the picture displayed, the first picture at the beginning
function ChangeImg1 () {
  var arr = new Array ();
  Arr[0]= ". /images/hao123/7.jpg ";
  Arr[1]= ". /images/hao123/8.jpg ";
  Arr[2]= ". /images/hao123/9.jpg ";
  var photo = document.getElementById ("Topphoto");
  if (num = = arr.length-1) num = 0;  If the last picture is displayed, the picture ordinal number becomes the number of the first one
  else num = 1;  Picture serial number plus one
  photo.src = Arr[num];
}
SetInterval ("ChangeImg1 ()", 5000);  Call CHANGIMG1 () function every 5000 milliseconds 

HTML code:

In the use of the best definition of the picture style, the picture of the long width of the unified, so that the picture dynamic display will be better.

The above is the entire content of this article, I hope to learn JavaScript program to help you.