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
Detailed explanation of the background-position percentage principle
When I was helping someone adjust the code today,...
Dynamic SQL statement analysis in Mybatis
This article mainly introduces the dynamic SQL st...
jQuery realizes the picture following effect
This article shares the specific code of jQuery t...
Node quickly builds the backend implementation steps
1. First install node, express, express-generator...
Detailed steps for installing the decompressed version of MySQL 5.7.20 (two methods)
I will explain the installation of MySQL under Wi...
Solution to the problem that the div width is set to width:100% and then the padding or margin exceeds the parent element
Preface This article introduces how to use the ne...
Detailed analysis of Vue child components and parent components
Table of contents 1. Parent components and child ...
Detailed installation and configuration of hadoop2.7.2 under ubuntu15.10
There are many Hadoop installation tutorials on L...
56 practical JavaScript tool functions to help you improve development efficiency
Table of contents 1. Digital Operation (1) Genera...
CSS3 realizes the red envelope shaking effect
There is a requirement to realize the shaking eff...
An article to show you how to create and use Vue components
Table of contents 1. What is a component? 2. Crea...
Vue-Router installation process and principle detailed
Table of contents 1. Front-end routing implementa...
Sitemesh tutorial - page decoration technology principles and applications
1. Basic Concepts 1. Sitemesh is a page decoratio...
Which is faster among MySQL full-text index, joint index, like query, and json query?
Table of contents Query Background 1. Like query ...
js implements axios limit request queue
Table of contents The background is: What will ha...