A Practical Image switching function supports click switching and automatic carousel.

Last Update:2014-09-11 Source: Internet

Author: User

Tags iqiyi

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

A Practical Image switching function supports click switching and automatic carousel.

I accidentally saw this little thing I previously wrote and pasted it. It supports click switching and automatic carousel for beginners to check it out!

The Code is as follows:

<Div class = "scroll_div"> <ul class = "pic"> <li>  </li>  </li>  </li>  </li>  </li> </ul> <ul class =" btn "> <li> Project 1 </li> <li> Project 2 </li> <li> Project 3 </li> <li> Project 4 </li> <li> Project 5 </li> </ul> </div>

Html

You only need to change the image path to your local one.

. Scroll_div {width: 1000px; height: 370px; margin: 0 auto; padding: 10px ;}. scroll_div. pic {width: 820px; height: 370px; overflow: hidden; position: relative; float: left ;}. scroll_div. pic li {width: 820px; height: 370px; position: absolute; top: 0; left: 0; display: none ;}. scroll_div. btn {float: right; width: 173px ;}. scroll_div. btn li {width: 173px; height: 66px; display: block; float: left; text-align: center; color: # fff; font: 18px/100% ""; font-weight: bold; background: #008dd8; margin-bottom: 10px; line-height: 66px; cursor: pointer ;}. scroll_div. btn li. on {background: # d73737;} li {list-style: none ;}

Css

$ (Function () {var listLen = $ (". pic li "). length, I = 0, setInter, speen = 3000;/* image carousel */$ (". btn li: last ").css ({" margin ":" 0px 0px 0px 0px "}); $ (". btn li: first "). addClass ("on"); $ (". pic li: first "). show (); $ (". btn li "). each (function (index, element) {$ (element ). click (function () {I = index; $ (this ). addClass ("on "). siblings (). removeClass ("on"); $ (". pic li "). eq (index ). animate ({opacity: "show"}, 300 ). siblings (). animate ({opacity: "hide"}, 300) ;}) $ (element ). hover (function () {clearInterval (setInter) ;}, function () {outPlay () ;}) out_fun = function () {if (I <listLen) {I ++;} else {I = 0 ;}; $ (". btn li "). eq (I ). addClass ("on "). siblings (). removeClass ("on"); $ (". pic li "). eq (I ). animate ({opacity: "show"}, 300 ). siblings (). animate ({opacity: "hide"}, 300) ;}outplay = function () {setInter = setInterval ("out_fun ()", speen) ;}outplay ();})

Webpage image carousel code. Three images are displayed. Click the image number in the lower right corner to switch.

<Script language = "javascript">
J = 0;
Function show (){
For (ii = 1; ii <6; ii ++)
{
Document. getElementById ("pic" + ii). style. display = "none ";
Document. getElementById ("Submit" + ii). style. backgroundColor = '';
}
J ++
If (j = 6 ){
J = 1;
}
Document. getElementById ("pic" + j). style. display = "block ";
Document. getElementById ("Submit" + j). style. backgroundColor = 'blue ';
A = setTimeout ('show () ', 1000 );
}
Function pic (pic ){
ClearTimeout ();
For (var I = 1; I <= 5; I ++ ){
If (I = pic ){
Document. getElementById ("pic" + pic). style. display = "block ";
Document. getElementById ("Submit" + pic). style. backgroundColor = 'blue ';
J = I
} Else {
Document. getElementById ("pic" + I). style. display = "none ";
Document. getElementById ("Submit" + I). style. backgroundColor = '';
}
}
A = setTimeout ('show () ', 1000 );
}
</Script>
<Style type = "text/css">
Input {background-color: white; border: # FF0000
Border: 0px;
Margin: 0px;
Padding: 0px;
Height: 20px;
Width: 20px;
Font-size: 14px ;}
</Style>

<Body onLoad = "show ()">
<Table width = "461" height = "163">
<Tr>
<Td width = "426" rowspan = "7">

Javascript image switching carousel

Imitating iQiYi homepage image carousel:

HTML code:

<! Doctype html>
<Html>
<Head>
<Meta charset = 'utf-8'/>
<Title> iQiYi carousel image </title>
<Link href = "index.css" rel = "stylesheet" type = "text/css"/>
<Script src = "move. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Window. onload = function (){
Var arr = ['000000', '000000', '000000', '000000', '000000', '000000', '000000 ', '2014% Zhang ', '2014% Zhang', and '2014% Zhang '];
Var domWidth = document.doc umentElement. clientWidth;
Var aScrollLi = $ ('scroll _ U'). getElementsByTagName ('lil ');
Var aThumbLi = $ ('thumb _ url'). getElementsByTagName ('lil ');
Var timer = null;
Var iNow = 0;
For (var m = 0; m <aScrollLi. length; m ++ ){
AScrollLi [m]. style. backgroundPosition =-parseInt (1500-$ ('outline'). offsetWidth)/2) + 'px, 0px ';
}
Window. onresize = function (){
For (var m = 0; m <aScrollLi. length; m ++ ){
AScrollLi [m]. style. backgroundPosition =-parseInt (1500-$ ('outline'). offsetWidth)/2) + 'px, 0px ';
}
}
For (var I = 0; I & lt ...... remaining full text>

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