jquery聚焦自动轮播图片

叁歲伎倆 2022-06-08 13:06 253阅读 0赞

主页核心代码（Default.aspx）：

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.          **<****meta** http-equiv="Content-Type" content="text/html; charset=UTF-8"**>**  
5.          **<****title****>**jQuery实现图片切换**</****title****>**    
6.          **<****script** type="text/javascript" src="js/jquery-1.4.2.min.js"**>****</****script****>**  
7.          **<****script** type="text/javascript" src="js/tupianqiehuan.js"**>****</****script****>**  
8.          **<****link** rel="stylesheet" type="text/css" href="css/tupianqiehuan.css"**>**  
9.  **</****head****>**  
10. **<****body****>**  
11.         **<****div** class="wrapper"**>**  
12.                 **<****h1****>**jquer实现图片切换**</****h1****>**  
13.                 **<****div** id="focus"**>**  
14.                        **<****ul****>**  
15.                                **<****li****>****<****a** href="\#" target="\_blank"**>****<****img** src="images/01.jpg" alt="" **/>****</****a****>****</****li****>**  
16.                                **<****li****>****<****a** href="\#" target="\_blank"**>****<****img** src="images/02.jpg" alt="" **/>****</****a****>****</****li****>**  
17.                                **<****li****>****<****a** href="\#" target="\_blank"**>****<****img** src="images/03.jpg" alt="" **/>****</****a****>****</****li****>**  
18.                                **<****li****>****<****a** href="\#" target="\_blank"**>****<****img** src="images/04.jpg" alt="" **/>****</****a****>****</****li****>****<****span** style="white-space:pre"**>**                                 **</****ul****>**  
19.                 **</****div****>**  
20.         **</****div****>**  
21. **</****body****>**  
22. **</****html****>**

CSS代码（tupianqiehuan.css）：

**\[css\]**  [view plain][]   [copy][view plain]

1.  \*\{ **margin**:0;**padding**:0;\}  
2.  body\{ **font-size**:12px;**color**:\#222;**font-family**:Verdana,Arial,Helvetica,sans-serif;**background**:\#f0f0f0;\}  
3.  .clearfix:after\{ **content**: ".";**display**: block;**height**: 0;**clear**: both;**visibility**: hidden;\}  
4.  .clearfix\{zoom:1;\}  
5.  ul,li\{ **list-style**:none;\}  
6.  img\{ **border**:0;\}  
7.  .wrapper\{ **width**:800px;**margin**:0 auto;**padding-bottom**:50px;\}  
8.  h1\{ **height**:50px;**line-height**:50px;**font-size**:22px;**font-weight**:normal;**font-family**:"Microsoft YaHei",SimHei;**margin-bottom**:20px;\}  
9.  /\* focus \*/  
10. \#focus\{ **width**:800px;**height**:280px;**overflow**:hidden;**position**:relative;\}  
11. \#focus ul\{ **height**:380px;**position**:absolute;\}  
12. \#focus ul li\{ **float**:left;**width**:800px;**height**:280px;**overflow**:hidden;**position**:relative;**background**:\#000;\}  
13. \#focus ul li div\{ **position**:absolute;**overflow**:hidden;\}  
14. \#focus .btnBg\{ **position**:absolute;**width**:800px;**height**:20px;left:0;bottom:0;**background**:\#000;\}  
15. \#focus .btn\{ **position**:absolute;**width**:780px;**height**:10px;**padding**:5px 10px;right:0;bottom:0;**text-align**:right;\}  
16. \#focus .btn span\{ **display**:inline-block;**\_display**:inline;\_zoom:1;**width**:25px;**height**:10px;**\_font-size**:0;**margin-left**:5px;**cursor**:pointer;**background**:\#fff;\}  
17. \#focus .btn span.on\{ **background**:\#fff;\}  
18. \#focus .preNext\{ **width**:45px;**height**:100px;**position**:absolute;top:90px;**background**:url(http://sandbox.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;**cursor**:pointer;\}  
19. \#focus .pre\{left:0;\}  
20. \#focus .next\{right:0;**background-position**:right top;\}

JS代码（tupianqiehuan.js）：

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  $(**function**() \{  
2.      **var** sWidth = $("\#focus").width(); //获取焦点图的宽度（显示面积）  
3.      **var** len = $("\#focus ul li").length; //获取焦点图个数  
4.      **var** index = 0;  
5.      **var** picTimer;  
6.        
7.      //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮  
8.      **var** btn = "<div class='btnBg'></div><div class='btn'>";  
9.      **for**(**var** i=0; i < len; i++) \{  
10.         btn += "<span></span>";  
11.     \}  
12.     btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";  
13.     $("\#focus").append(btn);  
14.     $("\#focus .btnBg").css("opacity",0.5);  
15.   
16.     //为小按钮添加鼠标滑入事件，以显示相应的内容  
17.     $("\#focus .btn span").css("opacity",0.4).mouseover(**function**() \{  
18.         index = $("\#focus .btn span").index(**this**);  
19.         showPics(index);  
20.     \}).eq(0).trigger("mouseover");  
21.   
22.     //上一页、下一页按钮透明度处理  
23.     $("\#focus .preNext").css("opacity",0.2).hover(**function**() \{  
24.         $(**this**).stop(**true**,**false**).animate(\{ "opacity":"0.5"\},300);  
25.     \},**function**() \{  
26.         $(**this**).stop(**true**,**false**).animate(\{ "opacity":"0.2"\},300);  
27.     \});  
28.   
29.     //上一页按钮  
30.     $("\#focus .pre").click(**function**() \{  
31.         index -= 1;  
32.         **if**(index == -1) \{index = len - 1;\}  
33.         showPics(index);  
34.     \});  
35.   
36.     //下一页按钮  
37.     $("\#focus .next").click(**function**() \{  
38.         index += 1;  
39.         **if**(index == len) \{index = 0;\}  
40.         showPics(index);  
41.     \});  
42.   
43.     //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度  
44.     $("\#focus ul").css("width",sWidth \* (len));  
45.       
46.     //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放  
47.     $("\#focus").hover(**function**() \{  
48.         clearInterval(picTimer);  
49.     \},**function**() \{  
50.         picTimer = setInterval(**function**() \{  
51.             showPics(index);  
52.             index++;  
53.             **if**(index == len) \{index = 0;\}  
54.         \},4000); //此4000代表自动播放的间隔，单位：毫秒  
55.     \}).trigger("mouseleave");  
56.       
57.     //显示图片函数，根据接收的index值显示相应的内容  
58.     **function** showPics(index) \{ //普通切换  
59.         **var** nowLeft = -index\*sWidth; //根据index值计算ul元素的left值  
60.         $("\#focus ul").stop(**true**,**false**).animate(\{ "left":nowLeft\},300); //通过animate()调整ul元素滚动到计算出的position  
61.         $("\#focus .btn span").stop(**true**,**false**).animate(\{ "opacity":"0.4"\},300).eq(index).stop(**true**,**false**).animate(\{ "opacity":"1"\},300);//为当前的按钮切换到选中的效果   
62.     \}  
63. \});  
64. [转载内容详情点击打开链接][Link 1]

[view plain]: http://blog.csdn.net/huyuyang6688/article/details/43342089#
[Link 1]: http://blog.csdn.net/huyuyang6688/article/details/43342089