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 /** 2 * 手绘*/ 3 var freehand = $('#freehand'); 4 var bannerWrapper = freehand.find('.banner_wrapper'); 5 var dotList = freehand.find('#dot_list'); 6 var bannerList = freehand.find('.banner_list'); 7 var bannerWidth = bannerList.find('li').width(); 8 var bannerInterval = null; 9 10 var bannerChangeAuto = function () { 11 if(bannerIndex < parseInt(dotList.find('li').size() - 1)) { 12 bannerIndex++; 13 }else { 14 bannerIndex = 0; 15 } 16 17 dotList.find('li').eq(bannerIndex).addClass('dot_active').siblings().removeClass('dot_active'); 18 19 var bannerL = bannerWidth*bannerIndex; 20 bannerWrapper.animate({'left': -bannerL + 'px'}, 500); 21 }; 22 23 dotList.find('li').on('mouseover', function () { 24 clearInterval(bannerInterval); 25 26 var i = $(this).index(); 27 var bannerL = bannerWidth*i; 28 var _this = $(this); 29 30 bannerWrapper.animate({'left': -bannerL + 'px'}, 500); 31 _this.addClass('dot_active').siblings().removeClass('dot_active'); 32 }).on('mouseout', function () { 33 console.log($(this).index()); 34 //bannerInterval = setInterval(bannerChangeAuto, 3000); 35 var outIndex = $(this).index(); 36 37 bannerInterval = setInterval(function () { 38 39 if(outIndex < parseInt(dotList.find('li').size() - 1)) { 40 outIndex++ 41 }else { 42 outIndex = 0; 43 } 44 45 dotList.find('li').eq(outIndex).addClass('dot_active').siblings().removeClass('dot_active'); 46 47 var bannerL = bannerWidth*outIndex; 48 bannerWrapper.animate({'left': -bannerL + 'px'}, 500); 49 }, 3000); 50 51 }); 52 53 var bannerIndex = 0; 54 bannerInterval = setInterval(bannerChangeAuto, 3000);
