Home > Developer > JavaScript
Js manual playback of images to achieve image carousel effect, js image carousel
This article provides examples to share the specific implementation code of js image carousel for your reference. The specific content is as follows:
I. html code section (et. thtml ):
<!DOCTYPE html>Ii. css code section (styleet, css ):
#main span{ width: 22px; height: 38px; position: absolute; display: inline-block; cursor: pointer; background: url("../images/1.png") no-repeat 0 0;}.span1{ background-position: 0 0; left:20px; top: 90px;}.span2{ background-position: -22px 0; right: 20px; top: 90px;}#main{ width: 500px; margin: 20px auto; text-align: center; border: solid 2px red; position: relative;}.initClass{ width: 50px; border: solid 2px #fff; margin: 10px 5px;}.focusClass{ width: 50px; border: solid 2px red; margin: 10px 5px;}Iii. js Code Section (et. js ):
/*** Created by LuanReco on 2015/8/28. */var slide = {arrImg: new Array ('images/1.jpg ', 'images/2.jpg', 'images/3.jpg ', 'images/4.jpg ', 'images/5.jpg ', 'images/6.jpg', 'images/7.jpg '), initClass: 'initclass', focusClass: 'focusclass', index: 1, arrMax: 7, imgMain: 'img '} slide. top = {// navigation event navEvent: function () {// The image corresponding to the subscript after some large images are accumulated $ (slide. imgMain ). src = slide. arrImg [slide. index-1]; // The Name Of The navigation image is var n = 'img '+ slide Based on the focal point value. index; // execute the corresponding navigation image Click Event $ (n ). click () ;}, // process the logic clickRight: function () {// click the right button to process the event console. log (slide. index); // if (slide. index <slide. arrMax) {// accumulate the current value slide. index ++; slide. top. navEvent () ;}, clickLeft: function () {// click the right button to process the event console. log (slide. index); // if (slide. index> 1) {// accumulate the current value slide. index --; slide. top. navEvent () ;}} slide. bottom = {initImgClass: function () {// Initialize all non-image styles for (var I = 1; I <= slide. arrMax; I ++) {var n = 'img '+ I; $ (n ). className = slide. initClass ;}, click: function () {// process the logic of the next part of the page $ ('imgl '). onclick = function () {slide. top. clickLeft () ;}$ $ ('imgr '). onclick = function () {slide. top. clickRight () ;}// obtain all the small images at the bottom for (var I = 1; I <= slide. arrMax; I ++) {// bind the Click Event var n = 'img '+ I for each image; $ (n ). onclick = function () {// Initialize all style slide. bottom. initImgClass (); // obtain the focus style for the image element itself this. className = slide. focusClass; // The large image corresponding to a small image is displayed in the upper image. $ (slide. imgMain ). src = slide. arrImg [this. getAttribute ('data-Index')-1]; // record the corresponding subscript position slide of the Focus Image in the array. index = this. getAttribute ('data-Index') ;}}} slide. autoplay = {play: function () {var m = 1; // for (var I = 1; I <= slide. arrMax; I ++) {setInterval (function () {var n = 'img '+ m; m ++; $ (n ). click (); if (m> 6) m = 1 ;}, 1000) //} slide. autoplay. play (); slide. bottom. click ();The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
