Case study of JavaScript code for implementing focal point image carousel effect (figure)

This article mainly introduces how to implement focal point image carousel Based on JavaScript, which has some reference value, interested friends can refer to this article for details on the implementation of focus image carousel Effect Based on JavaScript, which has some reference value. Interested friends can refer

Whether it is a website in a university or an e-commerce page, switching and carousel of the focus chart should be an indispensable application. Today, I will take notes on the technical points of the carousel for future reference.

I. structure layer (HTML)

The HTML structure of the focus chart is very simple. It is a parent container (id = box) that contains three sub-containers, respectively storing the image (id = pics) and the bottom button (id = dots), function switching arrow (class = turn ). After adding a style, the layout is second.

Ii. Presentation layer (CSS)

CSS is always indispensable for the performance and style of pages. For ease of description, id-based or class-based separator names are used to represent each p module.

1. box

As the parent container, box is the intuitive display of the whole focus image carousel structure on the webpage. Its width and height are the width and height of the image to be displayed. I set the image to PX in width and PX in height to center the parent container box and add a shadow. Styles can be set with your own interests, but overflow must be hidden. Positioning must be set to relative positioning to make the absolute positioning of sub-containers accurate.

#box{ width: 600px; height: 400px; margin-top: 100px; margin-left: auto; margin-right: auto; overflow: hidden; position: relative; box-shadow: 10px 10px 5px #888;}

2. pics

Pics is used to place images. Because it is a left/right switching function, the height is still the height of an image, but the width is = (the number of images displayed + 2) * The image width, the cause is explained at the action layer.

In addition, it should be noted that, from the display image, pics should set the left-right switch arrow and the bottom switch button, so the z-index should be set to 1.

#pics{ width: 5400px; height: 400px; position: absolute; z-index: 1;}

3. dots

Set z-index to 2 and upper-layer display; positioning to absolute positioning; other styles are as you like. Here I have set the mouse slide style and the style (on) corresponding to the js image position change ).

#dots{ width: 120px; height: 10px; position: absolute; bottom: 25px; left: 40%; z-index: 2;} #dots span{ width: 10px; height: 10px; float: left; margin-right: 5px; background: #333; border: solid 1px #FFF; border-radius: 50%; cursor: pointer;} #dots .on{background: orangered;}#dots span:hover{background: orangered;}

4. turn

The important style of the left and right arrows is consistent with that of the dots. Here I set the mouse to slide over the box to show the arrow.

.turn{ width: 40px; height: 40px; color: #fff; background: orangered; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; opacity: 0.5; position: absolute; top: 180px; display: none; z-index: 2; cursor: pointer;}.turn:hover{opacity: 0.8;}#box:hover .turn{display: block;}

At this point, the style and layout of the page are completed, but the implementation of the behavior layer methods and functions is the focus.

3. Behavior layer (Javascript)

Before defining a function, obtain the page node in the global scope.

var box = document.getElementById('box');var pics = document.getElementById('pics');var dots = document.getElementById('dots').getElementsByTagName('span');var pre = document.getElementById('pre');var next = document.getElementById('next');

1. Picture switching Animation

The core method of carousel images is image switching animation. The focus of this function is to receive a displacement offset, and then change the left value of pics relative to box to display the image.

Previously set in CSS, the box width is 600px, but the pics width is 5400px. Because the box overflow is hidden, only one image is displayed on the page. By receiving the specific displacement offset, change the left value (minus or plus n image widths) to change the displayed image.

In addition, there are two problems: if you do not set the image switching speed, the entire picture will be changed, and the switching effect will not be displayed; and if you do not stop clicking to switch, it will consume too much memory and cause the computer to be stuck. When the page is parked in the previous figure, the next one will be displayed. Therefore, we need to make a speed processing for the image, and an image cannot be switched after it is switched.

// Image switching function turn (offset) {turned = true; // the flag for switching. It is defined in the global scope. "true" indicates disabling var new_left = parseInt (pics. style. left) + offset; // The last left value var total_time = 300; // The total displacement time var interval = 10; // var speed = offset/(total_time/interval) for each displacement interval; // displacement speed -- function go () for each displacement () {if (speed <0 & parseInt (pics. style. left)> new_left) | (speed> 0 & parseInt (pics. style. left) <new_left) {// right cut | left cut pics. style. left = parseInt (pics. style. left) + speed + 'px '; setTimeout (go, interval);} else {turned = false; // the switch has been completed. enabled to allow pics switching. style. left = new_left + 'px '; if (new_left <-4200) {pics. style. left =-600 + 'px ';} else if (new_left>-600) {pics. style. left =-4200 + 'px ';}} go ();}

2. Arrow Switch

Input parameters based on the turn () function of the image switching function. Because it is left-right switching, the image width is directly input each time. Switch to the Right to input-600, and switch left to input 600.

It should be noted that the synchronization between the image and the button at the bottom, resetting the last post parameter on both sides, and determining whether to allow switching.

// Switch the arrow to implement next. onclick = function () {if (index = 7) {index = 1 ;}else {index + = 1 ;}show_dots (); if (! Turned) {turn (-600) ;}}; pre. onclick = function () {if (index = 1) {index = 7 ;}else {index-= 1 ;}show_dots (); if (! Turned) {turn (600 );}};

3. Button implementation at the bottom

The button is different from the arrow in that you can click it to switch to any image. Therefore, you need to calculate the function before passing in parameters. In addition, the style changes corresponding to the button cannot be forgotten.

// Function show_dots () {for (var I = 0; I <dots. length; I ++) {if (dots [I]. className = 'on') {dots [I]. className = ''; break;} dots [index-1]. className = 'on';} // button switch implementation for (var I = 0; I <dots. length; I ++) {dots [I]. onclick = function () {if (this. className = 'on') {return;} var my_index = parseInt (this. getAttribute ('index'); // note! Index is the custom property var offset =-600 * (my_index-index); // calculates the switch displacement if (! Turned) {turn (offset) ;}index = my_index; show_dots ();}}

4. automatic playback

Automatic playback is the problem of setting the timer and clearing the timer.

// Timed animation function play () {time = setInterval (function () {next. onclick () ;}, 3000) ;}// stop the function stop () {clearInterval (time) ;}play (); box. onmouseover = stop; box. onmouseout = play;

The demo and source code links are attached: demo and source code.

The above is the details of the code case (diagram) for implementing the focus graph carousel effect in JavaScript. For more information, see other related articles in the first PHP community!