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:
|
<<: Detailed explanation of Linux inotify real-time backup implementation method
>>: Mysql index types and basic usage examples
Recommend
How to build your own Angular component library with DevUI
Table of contents Preface Creating a component li...
Detailed explanation of the installation commands and usage of Docker and FastDFS
Docker Features 1) Quick to get started It only t...
Docker Data Storage Volumes Detailed Explanation
By default, the reading and writing of container ...
SQL optimization often makes mistakes, that's because you don't understand the usage of MySQL explain plan
Table of contents 1. Preparation 2. Introduction ...
In-depth understanding of MySQL various locks
Table of contents Lock Overview Lock classificati...
A brief discussion on four solutions for Vue single page SEO
Table of contents 1.Nuxt server-side rendering ap...
Example steps for implementing class selectors and name attribute selectors in js
The emergence of jQuery has greatly improved our ...
How to modify port 3389 of Windows server 2008 R2 remote desktop
The default port number of the Windows server rem...
VMware Workstation Pro installs Win10 pure version operating system
This article describes the steps to install the p...
MySql 5.6.35 winx64 installation detailed tutorial
Note: There was no error in the project startup d...
How to disable web page styles using Firefox's web developer
Prerequisite: The web developer plugin has been in...
How can the front end better display the 100,000 pieces of data returned by the back end?
Table of contents Preliminary work Backend constr...
What does input type mean and how to limit input
Common methods for limiting input 1. To cancel the...
Don’t bother with JavaScript if you can do it with CSS
Preface Any application that can be written in Ja...
Detailed explanation of Truncate usage in MYSQL
This article guide: There are two ways to delete ...