好了，几天没有写博客了，今天就来用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>
|
