Simple JS Carousel Map Code _javascript Skills

In the team with people, suddenly asked how to achieve the carousel map, into the front end of the field for more than a year, but for a long time did not write their own, has been written by Daniel's Plug-ins, today to write a simple for beginners to learn a small tutorial. Of course, there are many kinds of implementation principle and design pattern of the carousel graph, I am talking about using process-oriented programming to realize, the code will inevitably appear bloated redundancy relative to object-oriented design pattern. But there is no object-oriented abstraction is very suitable for beginners to understand and learn. Already in BAT's classmate see hope less spray point. You can also make a lot of comments.

The principle of the wheel-seeding diagram:

A series of image tiles of equal size, using CSS layout to display only one picture, the rest is hidden. Use the timer to automatically play through the calculation of the offset, or switch the picture by clicking the event manually.

HTML Layout

First, the parent container container all content, and the child container list has a picture. Child containers buttons Store button dots.

<div id= "Container" >
    <div id= "list" style= "left: -600px;" >
        
       " 
      
    </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>

Optimized for seamless scrolling.

When you switch back to the first picture from the last picture, there is a lot of space to fill this gap with two auxiliary graphs.

This is supplemented by seamless scrolling, looking directly at the code, copying the last picture before placing the first picture, while copying the first picture to place the back of the last picture. And, the first picture auxiliary diagram (actually is the actual display of the 5th picture hidden, so set style= "left: -600px;" ）

CSS adornments

1, the box model, document flow Understanding, absolute positioning problem.

2, pay attention to the list of Overflow:hidden, only a picture of the window, the left and right sides of the hidden.

3, to ensure that the buttons each span in the top of the layer, set it to the top. (z-index:999)

* {margin:0 padding:0; Text-decoration:none} body {padding:20px;} #container {width:600px; height:400px; Bor
DER:3PX solid #333;
Overflow:hidden;
position:relative; #list {width:4200px; height:400px; position:absolute z-index:1;} #list img {width:600px; height:400px; float:
Left } #buttons {position:absolute; height:10px; width:100px z-index:2; bottom:20px; left:250px;} #buttons span {curs
Or:pointer;
Float:left;
border:1px solid #fff;
width:10px;
height:10px;
border-radius:50%;
Background: #333;
margin-right:5px;
#buttons. on {background:orangered}. Arrow {cursor:pointer; display:none; 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;} #prev {left:20px;} #next {right:20px;}

Js

First we realize the manual click of the left and right two arrows to switch the picture effect:

Window.onload = function () {
var list = document.getElementById (' list '); var prev = document.getElementById (' prev ');
var next = document.getElementById (' Next ');
function animate (offset) {
//Gets the Style.left, is the relative left to get the distance, so the first picture after the style.left are negative,
// And Style.left gets a string that needs to be converted to numbers using parseint () rounding.
var newleft = parseint (list.style.left) + offset;
List.style.left = newleft + ' px ';
}
Prev.onclick = function () { 
animate;
}
Next.onclick = function () { 
animate ( -600);
}
}

After running we will find that the right arrow has been clicked, there will be blank, and, can not go back to the first picture. To click on the left arrow to return to the first picture.

Using the Google browser F12 because we use the offset left to get the picture, and when we see that it is less than 3600, because there is no 8th picture, there is no blank, so here we need to make a judgment on the offset.

Add this paragraph to the animate function:

if (newleft<-3000) {
list.style.left = -600 + ' px ';
}
if (newleft>-600) {
list.style.left = -3000 + ' px ';
}

OK, run it, no problem. The carousel graph, as the name suggests, is the picture that oneself moves, this time we need to use the built-in object timer of the browser.

For timers, it is necessary to explain the difference between setinterval () and settimeout. In simple terms, setinterval () executes multiple times and settimeout () executes only once.

More specific use can click the link to see the difference: Window.setinterval window.settimeout.

Here we are using setinterval (), because our pictures need to be recycled. Insert the following

var timer;
function Play () {
timer = setinterval (function () {
Prev.onclick ()
}, 1500)
}
();

Run, ok!

However, when we want to take a closer look at a picture, we have to stop the picture, we know that the timer is OK, this is used to window.clearinterval this method.

Here, we need to operate on its dom and need to get the whole carousel area;

var container = document.getElementById (' container ');
function Stop () {
clearinterval (timer);
}
Container.onmouseover = stop;
Container.onmouseout = play;

But here, a carousel map is basically completed, some students will ask, so simple. See the row of small dots below the picture. I gave you a function.

--------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------

Here is the upgraded version:

var buttons = document.getElementById (' buttons '). getElementsByTagName (' span ');
var index = 1;
function Buttonsshow () {
////This needs to clear the previous style for
(var i = 0; i < buttons.length; i++) {
if (buttons[i].classname = = ' on ') {
buttons[i].classname = ';
}
}
The array starts at 0, so index needs-1
buttons[index-1].classname = ' on '
;
} Prev.onclick = function () {
index = 1;
if (Index < 1) {
index = 5;
}
Buttonsshow ();
Animate (+);
}
Next.onclick = function () {
//due to the function of the top timer, the index will continue to increase, we have only 5 small dots, so we need to make a judgment
index = 1;
if (Index > 5) {
index = 1;
}
Buttonsshow ();
Animate ( -600);
}

Now looks more normal, but we want to achieve through the mouse click on one of the dots, switch to the corresponding picture, the same principle, we still need to offset to find the corresponding picture.

for (var i = 0; i < buttons.length i++) {
Buttons[i].onclick = function () {
//optimized, current picture Click the current dot does not execute the following code.
if (This.classname = = "on") {return
;
}
/* Offset get: Here to get the mouse to move to a small dot position, with this to the index binding to the object Buttons[i], go to google this usage * *
* Because the index here is a custom attribute, you need to use the getattribute () This DOM2-level method to get the properties of the custom index/
var clickindex = parseint (This.getattribute (' index '));
var offset = * (Clickindex-index);
Animate (offset);
Store the mouse click position, used for the normal display of small dots
index = clickindex;
Buttonsshow ();
}

Everyone, may have found that this carousel is a bit strange, not the same, it is left to switch, rewrite:

function Play () {//Convert the carousel map to the right toggle picture timer = setinterval (function () {Next.onclick ();}, Watts)} <! DOCTYPE html>  

The above is a small set to introduce a simple JS Carousel map Code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!