JS realizes the picture automatically plays, and when the mouse hovers over a dot, the picture changes to its representative picture.

Title, we will achieve this effect.

The first is the HTML5 part:

<! DOCTYPE html>
Then we write a simple CSS that makes the hover change the background color of the dots.
*{margin:0px;padding:0px;} div#figure_div{position:relative;width:800px;height:500px;} div#dots_div{position:absolute;/*width:100px;*/height:20px;left:352px;bottom:10px;} Div#figure_div li{width:16px;height:16px;border:1px solid #666;d isplay:inline-block;border-radius:8px;} Div#figure_div li:hover{background-color: #EAEA06;} Div#figure_div Img{width:800px;height:500px;float:left;}
Then is the part of JS, we use JS to achieve automatic playback and mouse across Li when switching pictures.
Var now_number;function mychangepicture (picture_number) {switch (picture_number) {case 1: document.getElementById ("img"). src= "Images/2.jpg"; Now_number=1;document.getelementbyid ("Dot1"). Style.backgroundcolor= ' #EAEA06 ';d Ocument.getelementbyid ("Dot2"). Style.backgroundcolor= '; document.getElementById ("Dot3"). Style.backgroundcolor= ';d Ocument.getelementbyid ("Dot4"). Style.backgroundcolor = '; Break;case 2:document.getelementbyid ("img"). src= "Images/3.jpg"; Now_number=2;document.getelementbyid (" Dot2 "). Style.backgroundcolor= ' #EAEA06 ';d Ocument.getelementbyid (" Dot1 "). Style.backgroundcolor= '; document.getElementById ("Dot3"). Style.backgroundcolor= ';d Ocument.getelementbyid ("Dot4"). Style.backgroundcolor = '; Break;case 3:document.getelementbyid ("img"). src= "Images/cy.jpg"; Now_number=3;document.getelementbyid ( "Dot3"). Style.backgroundcolor= ' #EAEA06 ';d Ocument.getelementbyid ("Dot1"). Style.backgroundcolor= '; document.getElementById ("Dot2"). Style.backgroundcolor= ';d Ocument.getelementbyid ("Dot4 "). style.backgroundcolor= '; Break;case 4:document.getelementbyid (" img "). src=" Images/zjnxz.jpg "; now_ Number=4;document.getelementbyid ("Dot4"). Style.backgroundcolor= ' #EAEA06 ';d Ocument.getelementbyid ("Dot1"). Style.backgroundcolor= ';d Ocument.getelementbyid ("Dot2"). Style.backgroundcolor= ';d Ocument.getelementbyid (" Dot3 "). style.backgroundcolor= '; break;}} Function mychangepictureauto () {now_number++;if  (now_number==5)  {now_number=1;} Mychangepicture (Now_number); SetTimeout ("Mychangepictureauto ()", 3000);} Window.onload=function () {Now_number=0;mychangepictureauto ();}

This article is from the "11817362" blog, please be sure to keep this source http://11827362.blog.51cto.com/11817362/1838762
JS realizes the picture automatically plays, and when the mouse hovers over a dot, the picture changes to its representative picture.