用jquery实现简单轮播

html 代码结构如下：

 1  <div class="hotpic">
 2             <div class="num">
 3                   <span class="cur">1</span>
 4                   <span>2</span>
 5                   <span>3</span>
 6                   <span>4</span>
 7                   <span>5</span>
 8                   <span>6</span>
 9                  <span>7</span>
10              </div>
11              <ul class="slideimg">
12                <li>
13                 <a href="" target="_blank"><img src="http://p.sfbest.com/web/abc6dc83/abc6dc830af9b473e284fbe77fcf6e3e.jpg" width="635" height="342" alt="周末特卖会第20期"></a>
14                </li>
15                <li>
16                  <a href="" target="_blank"><img src="http://p.sfbest.com/web/4fc7d3ce/4fc7d3ced704a4ff45d4ecdd4b0c1fe8.jpg" width="635" height="342" alt="会员回馈"></a>
17                </li>
18                <li>
19                  <a href="" target="_blank"><img src="http://p.sfbest.com/web/862fd5b5/862fd5b516a42b0f7dd95f9397b7076d.jpg" width="635" height="342" alt="特殊配方奶粉"></a>
20                </li>
21                <li>
22                  <a href="" target="_blank"><img src="http://p.sfbest.com/web/d41afb28/d41afb2809d2bb918095f10cfb77fe1b.jpg" width="635" height="342" alt="啤酒节晚上9点更新"></a>
23                </li>
24                <li>
25                   <a href="" target="_blank"><img src="http://p.sfbest.com/web/4dd6511e/4dd6511e3eae0f51068a8160ddb74366.jpg" width="635" height="342" alt="迈萨维诺橄榄油"></a>
26                </li>
27                <li>
28                   <a href="" target="_blank"><img src="http://p.sfbest.com/web/d1149821/d1149821dfc2dd102c458a3dddc62393.jpg" width="635" height="342" alt="低卡低脂低糖-饼干"></a>
29                </li>
30                <li>
31                   <a href="" target="_blank"><img src="http://p.sfbest.com/web/08e5699b/08e5699b442530dd2fbd1317807e5732.jpg" width="635" height="342" alt="频道-小而美的酿酒国家"></a>
32                </li>
33              </ul>
34  </div>

 

css 代码如下：

1  .hotpic{ width:635px; height:342px; position:relative; 
2 overflow:hidden; padding:0px;margin:0px 0px 0px 4px;}
3  #slideimg{width:635px;height:342px;overflow:hidden;}
4  .num{ position:absolute;width:140px;height:20px;right:6px; top:310px; z-index:10;}
5  .num span{ float:left;width:20px; height:20px; line-height:20px;display:inline-block; text-align:center; margin:0px 4px 0px 0px; cursor:pointer; color:#977037; font-weight:bold; border:1px solid #fff; background:#fcf9f4;font-size:14px;}
6  .num a.cur{ background:#977037;color:#fff;}

 

javascript 代码如下：

 1 $(function(){
 2     var sw = 0;
 3     $(".num span").mouseover(function(){
 4         sw = $(".num span").index(this);
 5         myShow(sw);
 6     });
 7     function myShow(i){
 8         $(".num span").eq(i).addClass("cur").siblings("span").removeClass("cur");
 9         $(".hotpic ul li").eq(i).stop(true,true).fadeIn(600).siblings("li").fadeOut(600);
10     }
11     $(".hotpic").hover(function(){
12         if(myTime){
13            clearInterval(myTime);
14         }
15     },function(){
16         myTime = setInterval(function(){
17           myShow(sw)
18           sw++;
19           if(sw==8){sw=0;}
20         } , 3000);
21     });
22     var myTime = setInterval(function(){
23        myShow(sw)
24        sw++;
25        if(sw==8){sw=0;}
26     } , 3000);
27 })

 

posted @ 2013-09-04 11:08  嘻哈披头士  阅读(93)  评论(0)    收藏  举报