1、HTML
1 <div class="banner"> 2 <div class="b_main"> 3 <div class="b_m_pic"> 4 <ul> 5 <li> 6 <a> 7 <img src="img/1.png" /> 8 </a> 9 </li> 10 <li> 11 <a> 12 <img src="img/2.png" /> 13 </a> 14 </li> 15 <li> 16 <a> 17 <img src="img/3.jpg" /> 18 </a> 19 </li> 20 <li> 21 <a> 22 <img src="img/4.jpg" /> 23 </a> 24 </li> 25 <li> 26 <a> 27 <img src="img/5.png" /> 28 </a> 29 </li> 30 <li> 31 <a> 32 <img src="img/6.png" /> 33 </a> 34 </li> 35 </ul> 36 </div> 37 </div> 38 <!--小圆点--> 39 <div class="b_list"> 40 <ul> 41 <li class="l_click"></li> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 <li></li> 47 </ul> 48 </div> 49 <div class="b_btn"> 50 <div class="b_left"><</div> 51 <div class="b_right">></div> 52 </div> 53 </div>
2、CSS
1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 7 ul li { 8 list-style: none; 9 } 10 11 img { 12 margin: 0; 13 width: 100%; /*这里的宽高是为了占满盒子*/ 14 height: 100%; 15 } 16 17 .banner { 18 position: relative; 19 width: 1366px; 20 height: 780px; 21 margin: 100px auto; 22 border: 10px solid #009999; 23 border-radius: 15px; 24 } 25 26 .banner .b_main { 27 position: relative; 28 width: 1366px; 29 height: 780px; 30 } 31 32 .banner .b_main .b_m_pic { 33 position: relative; 34 width: 1366px; 35 height: 780px; 36 } 37 38 .b_main .b_m_pic li { 39 position: absolute; /*这里给绝对定位，是为了把li叠在一起*/ 40 width: 1366px; 41 height: 780px; 42 top: 0; 43 left: 0; 44 } 45 /*小圆点的样式*/ 46 .b_list ul { 47 position: absolute; /*这里的ul根据banner定位*/ 48 right: 40px; 49 bottom: 30px; 50 } 51 52 .b_list ul li { 53 width: 20px; 54 height: 20px; 55 float: left; 56 background: #333; 57 margin-left: 20px; 58 border-radius: 50px; 59 border: 2px solid white; 60 } 61 62 .b_list ul .l_hover, .b_list ul .l_click { 63 border: 2px solid #333; 64 background: white; 65 } 66 /*两边耳朵的样式*/ 67 .b_btn div { 68 position: absolute; 69 width: 100px; 70 height: 100px; 71 background: rgba(0,0,0,0.7); 72 font-size: 60px; 73 color: white; 74 text-align: center; 75 line-height: 100px; 76 top: 50%; 77 margin-top: -80px; 78 cursor: pointer; 79 } 80 /*移到左边*/ 81 .b_btn .b_left { 82 left: 0; 83 border-radius: 50%; 84 } 85 /*移到右边*/ 86 .b_btn .b_right { 87 right: 0; 88 border-radius: 50%; 89 } 90 </style>
3、JS
1 var $li = $(".b_list ul li");//获取.b_list里面的所有li，放到$li这个变量里面 2 var len = $li.length - 1; 3 var _index = 0;//li的索引 4 var $img = $(".b_main .b_m_pic li");//同上 5 var $btn = $(".b_btn div"); 6 var timer = null; 7 8 $li.hover(function () { 9 $(this).addClass("l_hover");//指向li添加样式 10 }, function () { 11 $(this).removeClass("l_hover");//指向li删除样式 12 }); 13 14 //封装函数 15 function play() { 16 //获取li的下标，改变样式 17 $li.eq(_index).addClass("l_click").siblings().removeClass("l_click"); 18 //获取图片的下标，实现淡入淡出 19 $img.eq(_index).fadeIn().siblings().fadeOut(); 20 } 21 22 //点击事件 23 $li.click(function () { 24 _index = $(this).index(); 25 //获取li的下标，改变样式 26 //$li.eq(_index).addClass("l_click").siblings().removeClass("l_click"); 27 //获取图片的下标，实现淡入淡出 28 //$img.eq(_index).fadeIn().siblings().fadeOut(); 29 play(); 30 }); 31 32 //两边耳朵的点击事件 33 $btn.click(function () { 34 var index = $(this).index(); 35 if (index) { 36 _index++; 37 if (_index > len) { 38 _index = 0; 39 } 40 play(); 41 } else { 42 _index--; 43 if (_index < 0) { 44 _index = len; 45 } 46 play(); 47 } 48 }); 49 50 //定时轮播 51 function auto() { 52 //把定时器放进timer这个对象里面 53 timer = setInterval(function () { 54 _index++; 55 if (_index > len) { 56 _index = 0; 57 } 58 play(); 59 }, 2000); 60 } 61 62 auto(); 63 64 //当我移上d_main的时候停止轮播 65 $(".b_main").hover(function () { 66 clearInterval(timer); 67 }, function () { 68 //移开重新调用播放 69 auto(); 70 }); 71 72 //当我移上两边耳朵的时候停止轮播 73 $(".b_btn div").hover(function () { 74 clearInterval(timer); 75 }, function () { 76 //移开重新调用播放 77 auto(); 78 });
4、效果图
5、总结
① 图片、小圆点、两边的耳朵要使用position：absolute绝对定位，进行叠加。
注：绝对定位要根据父级元素进行定位，父级元素要加上position: relative;
② 根据索引值改变图片，达成切图
注：实现淡入淡出分别是fadeIn和fadeOut两个jq方法
siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。
扫描二维码关注公众号，回复：
5846656 查看本文章
③ 定时器（实现轮播）：
setInterval()是开始播放，clearInterval()是关闭
定时器有两个参数，第一个是函数方法（可以另写一个方法，写上方法名调用，也可以直接写一个function），第二个是时间