js to realize the rotation of web page pictures

This article shares the specific code of js to realize the rotation of web page pictures for your reference. The specific content is as follows

1. The effects are as follows:

2. Implement functions:

(1) After clicking the left or right arrow, the picture displayed below will be replaced by the corresponding previous or next picture.

(2) When you click on a picture in the navigation, the corresponding picture below will be displayed, and when you click on the previous or next picture again, the corresponding picture will be displayed

(3) The image address can come from the Internet or be a string array sent by your own server.

3. Implementation code:

(1) Directory structure:

(2) The code content of index.html is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Image Rotation</title>
 <script type="text/javascript" src="js/showPic.js"></script>
 <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
    <img id="picture" src="image/1.jpg"alt="my image"/>
    <div id="navigate">
    <ul id="image">
          <li>
              <a href="#" title="Left Arrow" οnclick="clickTurnLeft();">
                 <img src="image/left_aim.jpg" id="leftAim">
              </a>
          </li>
   <li>
             <a href="image/1.jpg" title="Flowers" οnclick="showPic(this);return false;">
          <img src="image/1.jpg" id="smallPic" alt="Flower thumbnail">
             </a>
   </li>
   <li>
             <a href="image/2.jpg" title="White Snow" click="showPic(this);return false;">
                <img src="image/2.jpg" id="smallPic"alt="snow thumbnail">
             </a>
   </li>
   <li>
      <a href="image/3.jpg" title="Flying Bird" οnclick="showPic(this);return false;">
                <img src="image/3.jpg" id="smallPic"alt="Bird thumbnail">
             </a>
   </li>
   <li>
       <a href="image/4.jpg" title="Rock" click="showPic(this);return false;">
          <img src="image/4.jpg" id="smallPic"alt="stone thumbnail">
              </a>
   </li>
          <li>
             <a href="#" title="Right Arrow" οnclick="clickTurnRight();">
                <img src="image/right_aim.jpg" id="rightAim"alt="Rotate right">
             </a>
         </li> 
      </ul>
   </div>   
</body>
</html>

(3) The code content of mystyle.css is as follows:

/* mystyle.css code */
 
body {
 text-align:center
}
#navigate{
 margin:0 auto; 
 width:1100px; 
 height:100px;
}
ul{
 margin-right:auto;margin-left:auto;
}
li{
 float:left;
 padding:10px;
 list-style:none;
}
 
#leftAim{
 width:100px;
 height:100px;
}
#smallPic{
 width:180px;
 height:120px;
 border:2px solid black;
}
#rightAim{
 width:100px;
 height:100px;
}
#picture{
 display:block;
 width:800px;
 height:600px;
 margin:0 auto;
}

(4) The code content of showPic.js is as follows:

//showPic.js
var href = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg"); 
var index = 0 ; 
 
function clickTurnLeft() {
 if (index == 0) {
  index = href.length - 1; 
 } else {
  index = --index % href.length ; 
 }
    var picture = document.getElementById("picture");
   picture.setAttribute("src",href[index]);
}
 
function clickTurnRight(){
 index = ++index % href.length; 
 var picture = document.getElementById("picture");
   picture.setAttribute("src",href[index]);
}
 
function showPic(whichPic){
 var source = whichPic.getAttribute("href");
 index = href.indexOf(source);
  var picture = document.getElementById("picture");
  picture.setAttribute("src",source);
}

4. Summary:

An array of image names is defined in the JS file. This array can be the image address data returned by the server or the image address on the network.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: