JS picture round broadcast manual switching effects

First aiming a eye JS picture rotation manual switching effect picture:

Code: js图片轮播手动切换特效

 No title document   * {padding: 0px; margin: 0px;} # Content: 400px; border: 10px solid #ccc; Position: Absolute; Top: 50%; LEFT: 50%; margin-top: -200px; margin-left: -200px;} # top, # bottom {width: 400px; Height: 40px; Background: # 000; color: #fff; Filter (Opacity: 80); Opacity: 0.8; Text-Align: center; line-height: 40px; position: absolute;} # {top: 0;} #} # {bottom: 0;} # prev, #Next {Position: Absolute; Top: 50%; margin-top: -20px; width: 40px; Height: 40px; text-align: center; line-height: 40px; text-decoration: none; background: # 000; Color: #fff; font-size: 30px; font-weight: bold;} # prev} #} # {right: 10px;} # img1 {width: 400px; height: 400px;} # Tab {Position : Absolute; Width: 400px; Height: 100px; Margin-TOP: -90px; text-align: center;} # info {margin-top: 10px; font-size: 20px;} # Tab INPUT {Width: 70px; Height: 30px;}. Active {Background: Yellow;}     Picture order is loaded ...    The number of pictures is loaded .... 
> Picture information loading .....

Window.onLoad = function () { Var Top = $ ('TOP'), Bottom = $ ('bottom'), prev = $ ('prev'), next = $ ('next'), IMG = $ ('IMG1'), loopbtn = $ ( 'loopbtn'), ORDERBTN = $ ('ORDERBTN'), INFO = $ ('INFO'), Tab = $ ('Tab'); // Switch Image Sequence Button VAR BTNS = Tab.GetElementsByTagname ('Input') ; // Part of the picture var num = 0; // Picture URL VAR PICSRC = ['IMG / 1.JPG', 'IMG / 2.JPG', 'IMG / 3.JPG', 'IMG / 4.JPG ']; // Picture quantity var piclen = PICSRC.LENGTH; / / Picture of Var Picinfo = [' Ground Beauty ',' Terminator ',' Sexy Beauty ',' Enchant Beauty ']; // Circulation Method VAR LOOpMethod = 1; // 1, cyclic switching; 0, sequential switching // cycle information var loopinfo = ['picture can be transferred from the last to the first switch', 'picture can only switch to the last one or One ']; changePic (); // cycle switch loopbtn.onClick = function () {loopMethod = 1; changeORDER ();} // sequential switch orderbtn.onclick = function () {loopMethod = 0; changeorder (); } // Previous prev.onclick = function () {NUM--; // 1, cyclic switching; 0, order switching if (loopMethod) {if (Num === -1) Num = Piclen - 1; ChangePic ();} else {if (Num === -1) {Num = 0; Alert ('is already the first picture!');} changingPic ();}} // Next Next.onclick = function () {Num ++; // 1, cycle switching; 0, sequential switching if (Num === piclen) NUM = 0; ChangePic ();} else {if (Num === Piclen ) {Num = piclen - 1; Alert ('is already the last picture!');} ChangePic ();}} // Switching order function changerder () {//The highlight of the button button for (VAR i = 0, len = btns.Length; i

The above is all the contents of this article, I hope to help everyone, and I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment