| 文章简介：JQ弄一个简单的banner. |
好了，几天没有写博客了，今天就来用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.<html
xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta
http-equiv="Content-Type"
content="text/html; charset=gb2312"
/>
05.<title>DEMO 2012-10-18</title>
06.<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.</head>
24.
25.<body>
26.
27.<div
class="banner">
28.
<div
class="cf">
29.
<div
class="img_wrap fl">
30.
<ul
class="img_b">
31.
<li><a
href="#"><img
src=http://www.webjx.com/javascript/"/demo/pic/banner_a.jpg"
alt=""
width="190"
height="270"
/></a></li>
32.
<li><a
href="#"><img
src=http://www.webjx.com/javascript/"/demo/pic/banner_b.jpg"
alt=""
width="190"
height="270"
/></a></li>
33.
<li><a
href="#"><img
src=http://www.webjx.com/javascript/"/demo/pic/banner_c.jpg"
alt=""
width="190"
height="270"
/></a></li>
34.
<li><a
href="#"><img
src=http://www.webjx.com/javascript/"/demo/pic/banner_d.jpg"
alt=""
width="190"
height="270"
/></a></li>
35.
</ul>
36.
</div>
37.
<ul
class="fl img_s">
38.
<li
class="hover"><a
href="#"><img
src=http://www.webjx.com/javascript/"/demo/pic/banner_a.jpg"
alt=""
/></a></li>
39.
<li><a
href="#"><img
src=http://www.webjx.com/javascript/"/demo/pic/banner_b.jpg"
alt=""
/></a></li>
40.
<li><a
href="#"><img
src=http://www.webjx.com/javascript/"/demo/pic/banner_c.jpg"
alt=""
/></a></li>
41.
<li><a
href="#"><img
src=http://www.webjx.com/javascript/"/demo/pic/banner_d.jpg"
alt=""
/></a></li>
42.
</ul>
43.
</div>
44.</div>
45.
46.<script
type="text/javascript"
src="jquery-1.8.1.min.js"></script>
47.<script
type="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>
如果有没看懂哒，或者好的建议，欢迎留言~ 0.0