<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus Graph and Rotary Broadcasting</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
body {
padding: 20px;
}
#container {
width: 600px; /*Here 600x400 is the width and height of the picture.*/
height: 400px;
border: 3px solid #333;
overflow: hidden; /*Hide the overflowed image because it floats left and has a total width of 4200.*/
position: relative;
}
#list {
width: 4200px; /*Set the total width of 7 pictures here.*/
height: 400px;
position: absolute; /*Location based on parent container container*/
z-index: 1;
}
#list img {
width: 600px; /*Here 600x400 is the width and height of the picture.*/
height: 400px;
float: left;
}
#buttons {
position: absolute;
height: 10px;
width: 100px;
z-index: 2; /*The button is on the top of the picture.*/
bottom: 20px;
left: 250px;
}
#buttons span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#buttons .on {
background: orangered; /*Selected button style*/
}
.arrow {
cursor: pointer;
display: none; /*The left and right switch buttons are hidden by default*/
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0,0,0,.3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow {
display: block; /*When the mouse is placed on the container, the left-right switch button is displayed.*/
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
</style>
<script>
window.onload = function () {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1; //Used to index the current button
var len = 5; //Number of pictures
var animated = false; //Used to determine whether the handover is going on or not
var interval = 3000; //Autoplay timer seconds, here is 3 seconds
var timer; //timer
function animate (offset) {
animated = true; //Handover in progress
var time = 300; //Total displacement time
var inteval = 10; //Displacement interval time
var speed = offset/(time/inteval); //Displacement per time
var left = parseInt(list.style.left) + offset; //target value
var go = function (){
//Both cases indicate that the switch is still in progress.
if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, inteval); //Continue to execute the switch go() function
}
else {
list.style.left = left + 'px';
if(left>-600){
list.style.left = -600 * len + 'px';
}
if(left<(-600 * len)) {
list.style.left = '-600px';
}
animated = false; //Switchover completed
}
}
go();
}
//Used to add styles to buttons
function showButton() {
//First, find the button with. on class and remove it.
for (var i = 0; i < buttons.length ; i++) {
if( buttons[i].className == 'on'){
buttons[i].className = '';
break;
}
}
//Add a class for the current button
buttons[index - 1].className = 'on';
}
//Automatic playback
function play() {
timer = setTimeout(function () {
next.onclick();
play();
}, interval);
}
//Clear timer
function stop() {
clearTimeout(timer);
}
//Right Click
next.onclick = function () {
if (animated) { //If the handover is still in progress, it terminates directly until the handover is complete.
return;
}
if (index == 5) {
index = 1;
}
else {
index += 1;
}
animate(-600);
showButton();
}
//Left Click
prev.onclick = function () {
if (animated) { //If the handover is still in progress, it terminates directly until the handover is complete.
return;
}
if (index == 1) {
index = 5;
}
else {
index -= 1;
}
animate(600);
showButton();
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
if (animated) { //If the handover is still in progress, it terminates directly until the handover is complete.
return;
}
if(this.className == 'on') { //If the button clicked is the current button, do not switch, end
return;
}
//Get the button's custom attribute index to get the index value
var myIndex = parseInt(this.getAttribute('index'));
var offset = -600 * (myIndex - index); //Calculating total displacement
animate(offset);
index = myIndex; //Assign a new index value to the index
showButton();
}
}
container.onmouseover = stop;//Move-in and Move-out Events for Parent Containers
container.onmouseout = play;
play(); //Call the automatic playback function
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="5.png" alt="1"/>
<img src="1.png" alt="1"/>
<img src="2.png" alt="2"/>
<img src="3.png" alt="3"/>
<img src="4.png" alt="4"/>
<img src="5.png" alt="5"/>
<img src="1.png" alt="5"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>First, we will talk about the use of several functions.
parseint():parseInt() judges the cardinality of a number based on string when the value of radix is 0 or it is not set.
For example, if the string begins with "0x", parseInt() parses the rest of the string into hexadecimal integers. If string begins with 0, ECMAScript v3 allows an implementation of parseInt() to parse subsequent characters into octal or hexadecimal digits. If string begins with a number of 1 to 9, parseInt() parses it into decimal integers.
such as:
parseInt("10"); // Return 10 ParseInt ("19, 10);// Return 19 (10 + 9) ParseInt ("11,2);// Return 3 (2+1) ParseInt ("17, 8);// Return 15 (8 + 7) ParseInt ("1f, 16);// Return 31 (16 + 15) parseInt("010"); // undetermined: return 10 or 8
Here I'm going to convert the string returned by list.style.left to a 10-digit integer.
Secondly, we will talk about ideas. The realization of the rotation chart is actually to arrange elements floating, such as 4200 pxwidth400px for each graph. In fact, the parent divide of one picture is used to set overflow to realize only one picture at a time, while the other pictures are arranged in sequence at the back, and then by setting up an overflow. Place two a tags relative to each side of the parent element (the general layout is the absolute positioning of the parent, and then the relative positioning of the child element to the parent element). Change the value of list.style.left by setting the onclick event of the a tag to enable users to see different picture content, such as - 600px at the beginning. This is the first picture, after clicking on the a tag of next on the right, the value of list.style.right changes to - 1200px; then you see the second picture, but the disadvantage of switching is that it is very abrupt, so we set a speed offset, and then we need to control the picture through the five dots below the picture, so we can control the picture. When clicking, the index value of the current element is obtained by subtracting the value of the index of the global variable (the index of the page when the dot is pressed) to obtain the offset and change the class of all the dots to be empty, and then add the class value of on to the dot to be switched. The function of the first picture (5.jpg) and the last picture (1.jpg) is to achieve the effect of infinite scrolling, because the effect is to switch pictures by setting the left value of the div container whose id is list, so when the wheel is running, it can play infinite circles through recursive calls in the timer. The first picture (5.jpg) and the last picture (1.jpg) are used to achieve the effect of infinite scrolling. When the fifth picture (5.jpg) is broadcast, the last picture is switched to the right. At this time, the left value is - 3600px. At the same time, we change the left value to - 600px, so that we return to the real first picture. Because the last picture is the first one (1. jpg), so the user's naked eye does not seem to change, so that the effect of infinite scrolling is achieved, the other same! So if there is no transition between the two pictures, the effect will be the same, and when the last one is rotated, it will flash away.