jQuery实现焦点图[兼容ie7+]

HTML:

 1 <div class="freehand" id="freehand">
 2             <h1>宠物手绘</h1>
 3             <div class="freehand_banner">
 4                 <div class="banner_wrapper">
 5                     <ul class="banner_list">
 6                         <li class="banner_list_item1">
 7                             <a href="#"><span class="banner_pic banner_pic1"></span></a>
 8                         </li>
 9                         <li class="banner_list_item2">
10                             <a href="#"><span class="banner_pic banner_pic2"></span></a>
11                         </li>
12                         <li class="banner_list_item3">
13                             <a href="#"><span class="banner_pic banner_pic3"></span></a>
14                         </li>
15                         <li class="banner_list_item4">
16                             <a href="#"><span class="banner_pic banner_pic4"></span></a>
17                         </li>
18                         <li class="banner_list_item5">
19                             <a href="#"><span class="banner_pic banner_pic5"></span></a>
20                         </li>
21                     </ul>
22                 </div>
23
24                 <ul class="dot_list" id="dot_list">
25                     <li class="dot_item1 dot_active">
26                         <a class="dot dot1" href="#"></a>
27                     </li>
28                     <li class="dot_item2">
29                         <a class="dot dot2" href="#"></a>
30                     </li>
31                     <li class="dot_item3">
32                         <a class="dot dot3" href="#"></a>
33                     </li>
34                     <li class="dot_item4">
35                         <a class="dot dot4" href="#"></a>
36                     </li>
37                     <li class="dot_item5">
38                         <a class="dot dot5" href="#"></a>
39                     </li>
40                 </ul>
41
42             </div>
43         </div>

CSS:

 1 #main .main_l .freehand h1 {
 2     font-size: 16px;
 3     font-weight: bold;
 4     color: #666666;
 5 }
 6
 7 #main .main_l .freehand .freehand_banner {
 8     margin-top: 15px;
 9     width: 282px;
10     height: 185px;
11     border: 2px solid lightblue;
12     position: relative;
13     overflow: hidden;
14 }
15
16 #main .main_l .freehand .banner_wrapper {
17     position: relative;
18     width: 1410px;
19     height: 185px;
20     background: #cccccc;
21 }
22
23 #main .main_l .freehand ul.banner_list .banner_pic,
24 #main .main_l .freehand ul.banner_list li {
25     width: 282px;
26     height: 185px;
27     list-style: none;
28     float: left;
29 }
30
31 #main .main_l .freehand ul.banner_list .banner_pic1 {
32     background: url("../images/banner_pic1.png") no-repeat center center;
33 }
34
35 #main .main_l .freehand ul.banner_list .banner_pic2 {
36     background: url("../images/banner_pic2.png") no-repeat center center;
37 }
38
39 #main .main_l .freehand ul.banner_list .banner_pic3 {
40     background: url("../images/banner_pic3.png") no-repeat center center;
41 }
42
43 #main .main_l .freehand ul.banner_list .banner_pic4 {
44     background: url("../images/banner_pic4.png") no-repeat center center;
45 }
46
47 #main .main_l .freehand ul.banner_list .banner_pic5 {
48     background: url("../images/banner_pic5.png") no-repeat center center;
49 }
50
51
52 #main .main_l .freehand ul.dot_list {
53     position: absolute;
54     right: 20px;
55     bottom: 15px;
56     z-index: 2;
57 }
58
59 #main .main_l .freehand ul.dot_list li {
60     list-style: none;
61     float: left;
62     width: 10px;
63     height: 10px;
64     margin-right: 5px;
65 }
66
67 #main .main_l .freehand ul.dot_list a.dot {
68     display: block;
69     width: 8px;
70     height: 8px;
71     background: #ffffff;
72     border: 1px solid lightblue;
73     position: absolute;
74     -webkit-border-radius: 50%;
75     -moz-border-radius: 50%;
76     border-radius: 50%;
77 }
78
79 #main .main_l .freehand ul.dot_list li.dot_active a.dot {
80     background: lightblue;
81 }

JS:

 1 var freehand = $(‘#freehand‘);
 2     var bannerWrapper = freehand.find(‘.banner_wrapper‘);
 3     var dotList = freehand.find(‘#dot_list‘);
 4     var bannerList = freehand.find(‘.banner_list‘);
 5     var bannerWidth = bannerList.find(‘li‘).width();
 6     var bannerInterval = null;
 7
 8     var bannerChangeAuto = function () {
 9         if(bannerIndex < parseInt(dotList.find(‘li‘).size() - 1)) {
10             bannerIndex++;
11         }else {
12             bannerIndex = 0;
13         }
14
15         dotList.find(‘li‘).eq(bannerIndex).addClass(‘dot_active‘).siblings().removeClass(‘dot_active‘);
16
17         var bannerL = bannerWidth*bannerIndex;
18         bannerWrapper.animate({‘left‘: -bannerL + ‘px‘}, 500);
19     };
20
21     dotList.find(‘li‘).on(‘mouseover‘, function () {
22         clearInterval(bannerInterval);
23
24         var i = $(this).index();
25         var bannerL = bannerWidth*i;
26         var _this = $(this);
27
28         bannerWrapper.animate({‘left‘: -bannerL + ‘px‘}, 500);
29         _this.addClass(‘dot_active‘).siblings().removeClass(‘dot_active‘);
30     }).on(‘mouseout‘, function () {
31         bannerInterval = setInterval(bannerChangeAuto, 3000);
32     });
33
34     var bannerIndex = 0;
35     bannerInterval = setInterval(bannerChangeAuto, 3000);