Css:
* { padding: 0; margin: 0;}li { list-style: none;}img { border: none;}body { background : #ecfaff;}.banner { width: 1900px; height: 710px; overflow: hidden; position: relative; margin: 10px auto 0;}ol{ position:absolute; right: 5px; bottom: 5px; z-index: 2;}ol li{ float: left; margin-right: 5px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f58223; padding: 3px 8px;}.active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px;}ul{ position: absolute; top: 0; left: 0; z-index: 1;}ul li{ width: 1900px; height: 710px; float: left;}ul img{ float: left; width: 1900px; height: 710px;}Html:
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/banner.css" rel="stylesheet" type="text/css"> <script src="js/jquery-3.4.1.min.js"></script> <title>幻灯片上下滚动效果</title></head><body> <script> $(function(){ var tagBtn = $("#demo ol li"); var tagUl = $("#demo ul"); var tagLis = tagUl.find("li"); //添加点击事件 /* tagBtn.click(function(){ $(this).attr("class",'active').siblings().attr("class",''); tagUl.animate({ top: $(this).index() * -710 },500); }); */ var clickNow = 0; var timer = null; tagBtn.click(function(){ clickNow = $(this).index(); tabFun(); }); $("#demo").mouseenter(function(){ clearInterval(timer); }).mouseleave(function(){ timer = setInterval(function(){ clickNow++; tabFun(); },2000); }) //启动定时器 timer = setInterval(function(){ clickNow++; tabFun(); },2000); function tabFun(){ tagBtn.attr("class",'').eq(clickNow).attr("class",'active'); if(clickNow==tagBtn.length){ tagBtn.eq(0).attr("class",'active'); } tagUl.animate({ top: -710 * clickNow },500,function(){ //判断是否最后一张图片 if(clickNow==tagBtn.length){ clickNow=0; tagUl.css("top",0); } }) } }); </script> <div>