JS carousel 2

Last Update:2018-12-06 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML file

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">

<Head>

<Title> New web project </title>

. BTN {

Position: absolute;

List-style: none;

Left: 370px;

Top: 100px;

}

. BTN Li {

Float: left;

Height: 15px;

Width: 24px;

Border: 1px solid # CCC;

Margin-left: 10px;

Text-align: center;

Line-Height: 15px;

Color: # FFF;

Background: #000;

Font-size: 9px;

Cursor: pointer;

}

</Style>

</Head>

<Body>

<H4> carousel images </H4>

</Ul>

</Div>

</Body>

// Call back after the switchover is complete

VaR callback = function (INDEX)

{

// Alert (INDEX); // you can write the code for controlling the style here, for example, converting the selected button style

VaR d = Document. getelementsbytagname ("Li ");

For (VAR I = 0; I <D. length; I ++)

{

If (I + 1 = index)

{

D [I]. style. Background = "# fff ";

D [I]. style. color = "red ";

}

Else

{

D [I]. style. Background = "#000 ";

D [I]. style. color = "fff ";

}

* Object Data

* @ Param (string) ID: the element ID of the carousel image;

* @ Param (number) width;

* @ Param (number) heigth height;

* @ Param (number) num number of images in the visible area;

* @ Param (array) links link Array

* @ Param (array) images Image array

* @ Param (function) callback function. The parameter is the index of the currently selected image and the style can be controlled.

* @ Param (Boolean) Whether slide is required

* @ Param (Boolean) Whether auto is automatically carousel

VaR DATA = {

Links: ["http://jifen.qq.com", "http://pay.qq.com", "http://service.qq.com"],

Images: ["images/0.jpg"," images/1.jpg", "images/2.jpg"],

ID: "Flash ",

Width: 530,

Height: 140,

Num: 1,

Callback: callback,

Slide: True,

Auto: True

};

(Function (){

VaR d = data. links;

VaR arr = [];

For (VAR I = 0; I <D. length; I ++)

{

Arr. push ("<li onmouseover = \" flash. move ("+ (I + 1) +"); \ "onclick = \" window. open ('"+ d [I] +"') \ ">" + (I + 1) + "</LI> ");

}

Arr = arr. Join ("\ n ");

Document. getelementbyid ("BTN"). innerhtml = arr;

})()

Flash. Show (data );

</SCRIPT>

</Html>

Flash. js

/**

* @ Author sky

VaR flash = {};

Flash. Show = function (data ){

// The shell (flash) is instantiated after execution

Flash = new flash (data );

Flash. Create ();

}

VaR flash = function (data)

{

This. Mid = data. ID | "Flash"; // container ID

This. mwidth = data. Width | 400; // The width of a single image.

This. mheight = data. Height | 300; // the height of a single image.

This. shownum = data. Num; // number of images displayed

This. mlinks = data. Links | []; // link Array

This. mimages = data. Images | []; // Image array

This. mfunc = data. Callback; // callback function

This. mslide = data. Slide; // whether to slide

This. mauto = data. Auto; // whether to play automatically

This. innerid = "flash_inner_div"; // ID of the container's internal layer

This. peroffset = data. width; // a single offset

This. minioffset = 20; // unit offset

This. Count = This. mlinks. Length | 0; // quantity

This. indexid = 1; // current index

This. Flag = true; // prevent the first displacement from being completed again

}

Flash. Prototype = {

Create: function (data)

{

// Set the parent layer

VaR parentdiv = Document. getelementbyid (this. Mid );

// Hidden upon parent layer Overflow

Parentdiv. style. Overflow = "hidden ";

// Width of a single image * Number of images in the display area

Parentdiv. style. width = This. mwidth * This. shownum + "PX ";

Parentdiv. style. Height = This. mheight + "PX ";

Parentdiv. style. Position = "relative ";

// Create

VaR L = This. count;

VaR arr = [];

// Position: relative positioning width of relative = width of a single image * Total number of images

VaR _ style = "height:" + this. mheight + "PX; width:" + (this. mwidth * l) + "PX; position: relative; left: 0px; padding: 0px ;";

// Create an inner layer, image, and link

Arr. Push ("<Div id = \" "+ this. innerid +" \ "style = \" "+ _ style +" \ "> ")

For (VAR I = 0; I <L; I ++)

{

Arr. push ("<a style = 'float: Left 'href = '" + this. mlinks [I] + "'target = '_ blank'> </a> ");

}

Arr. Push ("</div> ");

Parentdiv. innerhtml = arr. Join ("\ n ");

This. Move (1 );

// Load and start carousel

If (this. mauto)

{

VaR _ Self = this;

VaR loop = setinterval (function ()

{

_ Self. Left ()

},3500 );

}

Move: function (INDEX)

{

// Parameter verification

If (index <1)

Index = This. count-this.showNum + 1;

Else if (index> This. count-this.showNum + 1)

Index = 1;

// Cyclic control mark

_ Self = this;

If (_ Self. Flag = false) return false;

_ Self. Flag = false

VaR DIV = Document. getelementbyid (this. innerid );

// Obtain the current left

VaR curentpos = parseint (Div. style. Left );

// Calculate the end left

VaR endpost = curentpos + (this. indexid-index) * This. peroffset;

// Mark the direction

VaR _ flag = (this. indexid-index) <0? -1:1;

// Speed

VaR speed1 = This. minioffset * _ flag;

VaR speed2 = parseint (this. minioffset/2) * _ flag;

VaR speed3 = 2 * _ flag;

// Storage Index

This. indexid = index;

This. mfunc (this. indexid );

// Start displacement

VaR loop = setinterval (function ()

{

// Assign values directly when the gap is small to a certain value

VaR left = parseint (Div. style. Left );

If (math. Abs (left-endpost) <5 | (! _ Self. mslide ))

{

Div. style. Left = endpost + "PX ";

Clearinterval (loop );

_ Self. Flag = true;

} Else if (math. Abs (left-endpost) <20)

{

Div. style. Left = left + speed3 + "PX ";

} Else if (math. Abs (left-endpost) <60)

{

Div. style. Left = left + speed2 + "PX ";

} Else

{

Div. style. Left = left + speed1 + "PX ";

}

}, 1 );

Left: function ()

{

// Execution offset

This. Move (this. indexid + 1 );

Right: function ()

{

This. Move (this. indexId-1 );

}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JS carousel 2

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support