<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>index1</title> ???<style> ???????*{margin: 0; ???????????padding: 0; ???????} ???????ul{ ???????????list-style:none; ???????} ???????.outer{ ???????????margin: 50px auto; ???????????height: 340px; ???????????width: 790px; ???????????position: relative; ???????} ???????.img li{ ???????????position:absolute; ???????????top: 0; ???????????left:0; ???????} ???????.num { ???????????position: absolute; ???????????bottom: 20px; ???????????text-align: center; ???????????width: 100%; ???????} ???????.num li{ ???????????display: inline-block; ???????????height: 20px; ???????????width: 20px; ???????????background-color: gray; ???????????color: #ffffff; ???????????text-align:center; ???????????line-height:20px; ???????????border-radius:50%; ???????????margin: 0 10px; ???????} ???????.btn{ ???????????position: absolute; ???????????height: 60px; ???????????width: 30px; ???????????background-color: darkgray; ???????????color: #ffffff; ???????????text-align: center; ???????????line-height: 60px; ???????????top:50%; ???????????margin-top: -30px; ???????????display: none; ???????} ???????.left_btn{ ???????????left: 0; ???????} ???????.right_btn{ ???????????right: 0; ???????} ???????.outer:hover .btn{ ???????????display:block; ???????} ???????.current{ ???????????background-color:red!important; ???????} ???</style></head><body> ???<div class="outer"> ???????<ul class="img"> ???????????<li><a><img src="image/1.jpeg"/></a></li> ???????????<li><a><img src="image/2.jpeg"/></a></li> ???????????<li><a><img src="image/3.jpeg"/></a></li> ???????????<li><a><img src="image/4.jpeg"/></a></li> ???????</ul> ???????<ul class="num"> ???????????<li class="current">1</li> ???????????<li>2</li> ???????????<li>3</li> ???????????<li>4</li> ???????</ul> ???????<div class="left_btn btn"> < </div> ???????<div class="right_btn btn"> > </div> ???</div> ???<script src="jquery-3.2.1.min.js"></script> ???<script> ???????$(".num li").mouseover(function(){ ???????????$(this).addClass("current").siblings().removeClass("current"); ???????????var index = $(this).index(); ???????????i = index; ???????????$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); ???????}) ???????var time = setInterval(move, 1500); ???????var i = 0; ???????function move(){ ???????????if(i==3){ ???????????????i=-1; ???????????} ???????????i++; ???????????$(".num li").eq(i).addClass("current").siblings().removeClass("current"); ???????????$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); ???????} ???????function moveL(){ ???????????if(i==0){ ???????????????i=4; ???????????} ???????????i--; ???????????$(".num li").eq(i).addClass("current").siblings().removeClass("current"); ???????????$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); ???????} ???????$(".outer").hover(function(){ ???????????clearInterval(time); ???????},function(){ ??????????time=setInterval(move,1500); ???????}) ???????$(".right_btn").click(function() { ???????????move(); ???????}) ????????$(".left_btn").click(function() { ???????????moveL(); ???????}) ???</script></body></html>参考资料
- Python 全栈