Jquery实例教程:幻灯片图片的特效代码

 

好了,几天没有写博客了,今天就来用JQ弄一个简单的banner。

先看下效果图:

 

好了,最终效果就是上图所示:

列一下所带的功能:

①自动运行

②鼠标放在小图上会自动滚到对应的大图上(这个是废话)

③鼠标离开后保存当前的顺序继续执行(但愿你能理解这个的意思)

 

好了,进入正题:

先看下HTML:

接下来上CSS(PS:这个CSS写的有点草率,见谅~):

接下来就是关键了jQuery代码:

 

 

最后附上完整的代码:

 

view sourceprint?

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02.<htmlxmlns="http://www.w3.org/1999/xhtml">

03.<head>

04.<metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>

05.<title>DEMO 2012-10-18</title>

06.<styletype="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.</head>

24.

25.<body>

26.

27.<divclass="banner">

28.<divclass="cf">

29.<divclass="img_wrap fl">

30.<ulclass="img_b">

31.<li><ahref="#"><imgsrc=http://www.webjx.com/javascript/"/demo/pic/banner_a.jpg"alt=""width="190"height="270"/></a></li>

32.<li><ahref="#"><imgsrc=http://www.webjx.com/javascript/"/demo/pic/banner_b.jpg"alt=""width="190"height="270"/></a></li>

33.<li><ahref="#"><imgsrc=http://www.webjx.com/javascript/"/demo/pic/banner_c.jpg"alt=""width="190"height="270"/></a></li>

34.<li><ahref="#"><imgsrc=http://www.webjx.com/javascript/"/demo/pic/banner_d.jpg"alt=""width="190"height="270"/></a></li>

35.</ul>

36.</div>

37.<ulclass="fl img_s">

38.<liclass="hover"><ahref="#"><imgsrc=http://www.webjx.com/javascript/"/demo/pic/banner_a.jpg"alt=""/></a></li>

39.<li><ahref="#"><imgsrc=http://www.webjx.com/javascript/"/demo/pic/banner_b.jpg"alt=""/></a></li>

40.<li><ahref="#"><imgsrc=http://www.webjx.com/javascript/"/demo/pic/banner_c.jpg"alt=""/></a></li>

41.<li><ahref="#"><imgsrc=http://www.webjx.com/javascript/"/demo/pic/banner_d.jpg"alt=""/></a></li>

42.</ul>

43.</div>

44.</div>

45.

46.<scripttype="text/javascript"src="jquery-1.8.1.min.js"></script>

47.<scripttype="text/javascript">

48.var cur = 0; //用来存储当前的顺序,也就是运行第几个帧banner

49.var runTimer = setInterval(autoRun, 3000); //每过3秒知道执行

50.

51.$(document).ready(function(){

52.$(".img_s").find("li").each(function(index){

53.$(this).hover(function(){

54.clearInterval(runTimer); //清除runTimer

55.$(this).addClass("hover").siblings("li").removeClass("hover"); //不解释

56.var mt = 270*index; //运算top的值

57.$(".img_b").stop(true,false).animate({top:"-"+mt+"px"},500); //不用解释吧?

58.cur = index; //把当前index保存在cur中

59.},function(){

60.runTimer = setInterval(autoRun, 3000); //鼠标离开时,继续自动执行

61.})

62.});

63.});

64.

65./* 自动执行的代码 */

66.function autoRun(){

67.$(".img_s").find("li").eq(cur).addClass("hover").siblings("li").removeClass("hover");

68.var mt = 270*cur

69.$(".img_b").stop(true,false).animate({top:"-"+mt+"px"},500);

70.cur++;

71.cur = cur < $(".img_s").find("li").size() ? cur : 0; //判断是否小于banner帧数,不是的话就赋值为0

72.}

73.</script>

74.</body>

75.</html>

 

 

 

 
 
 

本站永久域名

www.iulei.com

爱优磊个人网站由站长制作并维护

爱优磊保留本网页的设计版权,任何人在未经许可情况下不得套用。

Copyright ©2015 All rights reserved. 京ICP备14003788