<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .slider_main { width: 790px; height: 340px; margin: 20px auto; position: relative; overflow: hidden; } .slider_list { margin: 0; padding: 0; height: 340px; position: absolute; } .item { list-style: none; float: left; } .item:first-child { display: block; } .item a { font-size: 0; } .circle_dot { position: absolute; left: 50%; bottom: 20px; margin: auto; font-size: 0; padding: 4px 8px; border-radius: 12px; background-color: hsla(0, 0%, 100%, .3); z-index: 1; transform: translateX(-50%); } .dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 100%; background-color: #fff; cursor: pointer; } .dot.active { background-color: #db192a; } .arrow { display: none; position: absolute; z-index: 1; top: 50%; margin-top: -30px; width: 30px; height: 60px; background-color: rgba(0, 0, 0, .1); line-height: 60px; text-align: center; color: #fff; font-size: 20px; cursor: pointer; } .arrow:hover { background-color: rgba(0, 0, 0, 0.5); } .arrow_left { left: 0; } .arrow_right { right: 0; } .fl { float: left; } </style> </head> <body> <div class="slider_main"> <ul class="slider_list"> <li class="item fl"> <a href="#"> <img class="item_img" src="img/1.jpg" /> </a> </li> <li class="item fl"> <a href="#"> <img class="item_img" src="img/2.jpg" /> </a> </li> <li class="item fl"> <a href="#"> <img class="item_img" src="img/3.jpg" /> </a> </li> <li class="item fl"> <a href="#"> <img class="item_img" src="img/4.jpg" /> </a> </li> <li class="item fl"> <a href="#"> <img class="item_img" src="img/5.jpg" /> </a> </li> <li class="item fl"> <a href="#"> <img class="item_img" src="img/6.jpg" /> </a> </li> <li class="item fl"> <a href="#"> <img class="item_img" src="img/7.jpg" /> </a> </li> <li class="item fl"> <a href="#"> <img class="item_img" src="img/8.jpg" /> </a> </li> </ul> <!--指示器--> <div class="circle_dot"> </div> <!--箭头--> <div class="arrow_left arrow"><</div> <div class="arrow_right arrow">></div> </div> </body> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var $wrap = $(".slider_main"); var $list = $wrap.find(".slider_list"); var $item = $list.find('.item'); var $dotBox = $wrap.find(".circle_dot"); var $arrowLeft = $wrap.find(".arrow_left"); var $arrowRight = $wrap.find(".arrow_right"); var step = $item.width(); var timer; var i = 0; //默认显示第i张 //生成圆点 $item.each(function(i) { $dotBox.append('<div class="dot"></div>'); }); //计算宽度 $list.width($item.outerWidth() * $item.length); $list.prepend($item.last().clone()); $list.append($item.first().clone()); console.log($item.length) stop(); setActiveDot(i); clearInterval(timer); var timer = setInterval(function() { move(); }, 2000); function move() { //i++; var left = parseFloat($list.css("left")); left = left - step; $list.stop().animate({ left: left }); //stop(); setActiveDot(i); play(); if(i == $li.length) { i = 0; $list.css({ left: 0 }); }; } function stop() { clearInterval(timer); } //设置定时器 function play() { clearInterval(timer); timer = setInterval(function() { $arrowRight.trigger("click"); }, 2000); } play(); function setActiveDot(i) { $dotBox.find('.dot').removeClass("active").eq(i).addClass("active"); } $dotBox.on("mouseenter", '.dot', function() { i = $(this).index(); stop(); move(i); }); $dotBox.on("mouseleave", '.dot', function() { play(); }); $wrap.hover(function() { stop(); $arrowLeft.fadeIn(); $arrowRight.fadeIn(); }, function() { play(); $arrowLeft.fadeOut(); $arrowRight.fadeOut(); }); $arrowRight.click(function() { console.log(i); if(i == $item.length) { i = 1; $list.animate({ left: '0' }, 1) i = 0; } else { i++; } move(i); }); $arrowLeft.click(function() { console.log(i); if(i == 0) { $list.css({ left: '0' }) i = $item.length - 1; } else { i--; } move(i); }) </script> </html>