Home > Others

jquery Example Tutorial: Special effects code for slide pictures

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

Article Introduction: JQ to get a simple banner.

Well, a few days did not write a blog, today to use JQ to get a simple banner.

First look at the effect of the picture:

Well, the final effect is as shown in the figure above:

Make a list of the features you've got:

① Auto Run

② Mouse on the small map will automatically roll to the corresponding large image (this is nonsense)

③ to save the current order after the mouse is left (I wish you could understand that)

If you want to see the effect: please hit it hard.

Okay, get to the point:

First look at the HTML:

       

Next on the CSS (PS: This CSS write a bit hasty, forgive ~):

       

The next key is the jquery code:

Finally attach the complete code:

View Sourceprint? 01.<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> . xmlns= "http://www.w3.org/1999/xhtml" > 03. . <meta http-equiv= "Content-type" content= "text/html; charset=gb2312" /> 05.<title>demo 2012-10-18</title> A . <style type= "Text/css" > 07.* {padding:0; margin:0} 08.UL, li {list-style:none} 09.body {font-size:12px; color: #333} 10..fl {Float:left} 11..cf {zoom:1} 12..cf:after {clear:both; Content: "."; Display:block height:0; Visibility:hidden} 13..banner {padding:5px border-right:1px solid #EFEFEF} 14..banner img {border:0 None} 15..img_wrap {width:190px; height:270px; overflow:hidden;} 16..img_b {position:relative} 17..img_b li {width:190px; height:270px; Overflow:hidden} 18..img_s {padding:0 0 0 5px} 19..img_s Li {margin:0 0 1px 0;width:49px; height:64px; padding:2px 1px 1px 5px;} 20..img_s li img {width:42px; height:60px} 21..img_s li.hover {background:url (/demo/pic/bsbg.jpg) No-repeat} 22.</style> 23. . 25.<body> Num. . <div class= "banner" > . <div class= "CF" > . <div class= "Img_wrap fl" > . <ul class= "Img_b" > . <li><a href= "#" > src=http://www.webjx.com/javascript/"/demo/pic/banner_a.jpg" alt= "" width= "190" height= "270" /></a></li> A . <li><a href= "#" > src=http://www.webjx.com/javascript/"/demo/pic/banner_b.jpg" alt= "" width= "190" height= "270" /></a></li> . <li><a href= "#" > src=http://www.webjx.com/javascript/"/demo/pic/banner_c.jpg" alt= "" width= "190" height= "270" /></a></li> . <li><a href= "#" > src=http://www.webjx.com/javascript/"/demo/pic/banner_d.jpg" alt= "" width= "190" height= "270" /></a></li> </ul> </div> Panax Notoginseng. <ul class= "fl img_s" > A . <li class= "hover" ><a href= "#" > src=http://www.webjx.com/javascript/"/demo/pic/banner_a.jpg" alt= "" /></a></li> A . <li><a href= "#" > src=http://www.webjx.com/javascript/"/demo/pic/banner_b.jpg" alt= "" /></a></li> . <li><a href= "#" > src=http://www.webjx.com/javascript/"/demo/pic/banner_c.jpg" alt= "" /></a></li> . <li><a href= "#" > src=http://www.webjx.com/javascript/"/demo/pic/banner_d.jpg" alt= "" /></a></li> </ul> </div> 44.</div> . . <script type= "Text/javascript" src= "Jquery-1.8.1.min.js" ></script> . <script type= "Text/javascript" > var cur = 0;//to store the current order, that is, to run the first few frames banner var runtimer = setinterval (AutoRun, 3000);//Every 3 seconds know the execution . $ (document). Ready (function () { $ (". img_s"). Find ("Li"). each (function (index) { $ (this). Hover (function () { clearinterval (Runtimer);//Clear Runtimer $ (this). addclass ("hover"). Siblings ("Li"). Removeclass ("hover");//No explanation var mt = 270*index//operation top Value $ (". Img_b"). Stop (True,false). Animate ({top: "-" +mt+ "px"},500);//no explanation? cur = index;//keep current index in cur },function () { Runtimer = setinterval (AutoRun, 3000);//When the mouse leaves, continue to perform automatically }) 62.}); 63.}); . 65./* Automatically executes the code * * function AutoRun () { $ (". img_s"). Find ("Li"). EQ (cur). addclass ("hover"). Siblings ("Li"). Removeclass ("hover"); var mt = 270*cur $ (". Img_b"). Stop (True,false). Animate ({top: "-" +mt+ "px"},500); cur++; cur = cur < $ (". img_s"). Find ("Li"). Size ()? cur:0;//To determine whether it is less than banner frame number, and assign 0 if not A .} 73.</script> 74.</body> 75.

If there is no understanding, or good advice, welcome message ~ 0.0



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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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