<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .banner { width: 500px; height: 300px; margin: 100px auto; position: relative; overflow: hidden; } .banner .img { left: 0; top: 0; position: absolute; z-index: 1; } .banner .img li { float: left; } .banner .img img { width: 500px; height: 300px; } .banner .num { width: 100%; height: 30px; bottom: 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; z-index: 2; } .banner .num li { width: 16px; height: 16px; margin-left: 16px; border-radius: 50%; background-color: aquamarine; } .banner .num li.on { background-color: red; } .banner div { width: 20px; height: 40px; background-color: aquamarine; color: red; text-align: center; font-size: 20px; line-height: 40px; position: absolute; z-index: 2; } .banner .btn_l { top: 50%; left: 10px; transform: translate(0, -50%); } .banner .btn_r { top: 50%; right: 10px; transform: translate(0, -50%); } </style> </head> <body> <noscript> <h1>这样页面需要浏览器启用JavaScript</h1> </noscript> <div class="banner"> <ul class="img"> <li><img src="./slider-swiper/images/1.jpg" alt=""></li> <li><img src="./slider-swiper/images/2.jpg" alt=""></li> <li><img src="./slider-swiper/images/3.jpg" alt=""></li> </ul> <ul class="num"></ul> <div class="btn_l"><</div> <div class="btn_r">></div> </div> </body> <script type="text/javascript" src="./static/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var width = 500; var iNow = 1;/* 0 1 2 ... count count+1 */ var count = $('.banner .img li').size(); var last = $('.banner .img li').last().clone(); var first = $('.banner .img li').first().clone(); $('.banner .img').prepend(last).append(first); $('.banner .img').css({ width * (count + 2) + 'px', left: -width + 'px' }); var num_li = ''; for (var i = 0; i < count; i++) { // num_li += `<li id=${i}></li>`; num_li = num_li + '<li id=' + i + '></li>'; } $('.banner .num').append(num_li); $('.banner .num li').first().addClass('on'); $('.banner .num').on('click', function (event) { myStopPropagation(event); console.log('.banner .num click'); event = event || window.event; var target = event.target || event.srcElement; if (target.nodeName.toLowerCase() == 'li') { clearInterval(timer); $('.banner .img').stop().animate({ left: -width * (parseInt(target.id) + 1) }, { duration: 500 }); $('.banner .num li').removeClass('on').eq(target.id).addClass('on'); } }); /* 注意： 1.mouseenter，mouseleave的效果等同于hover 2.ie上是鼠标移入移出，而谷歌上是移入后按下鼠标左键才会触发 3.鼠标在 .banner 下子各个元素之间切换移动也会触发 mouseover，mouseout，而不会触发 mouseenter，mouseleave。 4.ie不支持es6语法，而谷歌支持 5.ie低版本比如ie7并不支持一部分css，比如display：flex；border-radius：50%；等等，但是ie10可以； 6.老版本flex布局 -webkit-box 了解一下，听说兼容性好 https://blog.csdn.net/qq_42625428/article/details/83755402 */ $('.banner').hover(function (eventObject) { console.log('.banner hoverIN'); clearInterval(timer); }, function (eventObject) { console.log('.banner hoverOUT'); clearInterval(timer); timer = setInterval(move, 2600); }); /* $('.banner').on('click',function(event){ console.log('.banner click'); }).on('mouseenter',function(event){ console.log('.banner mouseenter'); clearInterval(timer); }).on('mouseleave',function(){ console.log('.banner mouseleave'); clearInterval(timer); timer = setInterval(move, 2600); }); */ /* $('.banner').on('click',function(event){ console.log('.banner click'); }).on('mouseover',function(event){ console.log('.banner mouseover'); // clearInterval(timer); }).on('mouseout',function(){ console.log('.banner mouseout'); // clearInterval(timer); // timer = setInterval(move, 2600); }); */ $('.banner .btn_r').on('click', function (event) { myStopPropagation(event); console.log('.banner .btn_r click'); clearInterval(timer); move('flag'); }); $('.banner .btn_l').on('click', function (event) { myStopPropagation(event); console.log('.banner .btn_l click'); clearInterval(timer); move(); }); function myStopPropagation(event) { event = event || window.event //event事件的兼容性写法 if (event.stopPropagation) { //能进来一定是支持该方法 event.stopPropagation(); //在主流浏览器中阻止 } else { event.cancelBnbble = true//true为阻止冒泡 } } function move(flag) { arguments.length ? iNow-- : iNow++; if (iNow > count) { iNow = 1; $('.banner .img').css('left', -width * 0);//定位到第一张图count } if (iNow < 1) { iNow = count; $('.banner .img').css('left', -width * (iNow + 1));//定位到最后一张图1 } $('.banner .img').stop().animate({ left: -width * iNow }, { duration: 500 }); $('.banner .num li').eq(iNow - 1).addClass('on').siblings().removeClass('on'); } var timer = setInterval(move, 2600); }) </script> </html>