图片来源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.outer{
margin: 50px auto;
width: 590px;
height: 470px;
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: gray;
color: #ffffff;
text-align: center;
line-height: 60px;
top: 50%;
margin-top: -30px;
display: none;
opacity: 0.8;
}
.left_btn{
left: 0; }
.rigth_btn{
right: 0;
}
.outer:hover .btn{
display:block ;
}
.current{
background-color: red!important; /*设置优先级*/
}
{# .num .current{#}
{# background-color: red#}
{#}#}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li> </ul>
<ul class="num">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="left_btn btn"> < </div>
<div class="rigth_btn btn"> > </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
var i=0;
$(".num li").mouseover(function () {
$(this).addClass("current").siblings().removeClass('current');
var index=$(this).index();
i=index;//解决一个bug（当鼠标放到outer图上时，定时器是停止，鼠标再指到current的某个数字，图片就要开始从
//那里开始轮播，如果没有i=index，图片会从最原先定时器停止的位置的开始轮播。
$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
var time=setInterval(move,1000);
//eq() 方法将匹配元素集缩减值指定 index 上的一个。
//stop() 方法用于在动画或效果完成前对它们进行停止
function move() {
i++
$(".num li").eq(i).addClass("current").siblings().removeClass('current');
var index=$(this).index();
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
if(i==6){
i=-1
}
}
//当鼠标放到页面上时，停止定时器，离开开启定时器函数hover
// hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
$(".outer").hover(function () {
clearInterval(time)
},function () {
time=setInterval(move,1000)
})
/****************点击左右按钮******************/
$(".rigth_btn").click(function () {
move()
})
$(".left_btn").click(function () {
move_left()
})
function move_left() {
if(i==0){
i=6
}
i--
$(".num li").eq(i).addClass("current").siblings().removeClass('current')
var index=$(this).index();
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
</script>
</body>
</html>
京东的首页