Use JS to achieve carousel image effects (2). js

Use JS to achieve carousel image effects (2). js

On the basis of the Code (1) for implementing image carousel effect using JS in the previous article, the response event of the left and right arrows is added, and the left and right arrows can be clicked to scroll the image:

The js Code is as follows:

Window. onload = function () {// carousel initialization var lunbo = document. getElementById ('content'); var imgs = lunbo. getElementsByTagName ('img '); var uls = lunbo. getElementsByTagName ('ul '); var lis = lunbo. getElementsByTagName ('lil'); var next = document. getElementById ('Next'); var prev = document. getElementById ('prev'); var item = 0; // In the initial state, a circle is in the highlighted mode lis [0]. style. fontSize = '26px '; lis [0]. style. color = '# fff'; imgs [0]. style. Display = 'block'; // defines a global variable for automatic carousel Image Sequence changes var pic_index = 1; // automatic carousel. you can use clearInterval () to clear the recording at any time by using pic_time. Var pic_time = setInterval (autobofang, 1000); // function autobofang () {if (pic_index> = lis. length) {pic_index = 0;} picChange (pic_index); pic_index ++;} // Manual carousel for (var I = 0; I <lis. length; I ++) {lis [I]. addEventListener ("mouseover", change, false);} function change (event) {var event = event | window. event; var targetmediaevent.tar get | event. srcElement; var children = target. parentNode. children; for (var I = 0; I <children. length; I ++) {if (target = children [I]) {picChange (I) ;}}// function picChange (I) {// do not display all images. All circles are in the common style for (var j = 0; j 
: Move the cursor over the Arrow

When you click the arrow, the image will change, and the small circle below will show the highlighted effect of the corresponding image.

Summary:

The basic carousel effect has been achieved. What needs to be done later is to streamline the code, encapsulate the code, and improve the running efficiency.