<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {
margin: 0;
padding: 0
}
.aa {
width: 990px;
height: 360px;
border: 3px #F00 solid;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.aa .pic li {
width: 990px;
height: 360px;
list-style: none;
float: left
}
.aa .pic li img {
width: 990px;
height: 360px;
}
.aa .list {
width: 200px;
height: 40px;
position: absolute;
right: 100px;
bottom: 20px
}
.aa .list li {
width: 25px;
height: 25px;
list-style: none;
float: left;
text-align: center;
line-height: 25px;
background: #FCB400;
border-radius: 50%;
margin: 5px;
cursor: pointer
}
.aa .list li.on {
background: #C50A0E;
color: #FFF
}
</style>
<script src="https://xxhzm.cn/jq.js"></script>
<script>
$(function() {
let w = $('.aa .pic li').width()
let n = $('.aa .pic li').length
$('.aa .pic ul').width(n * w)
let btn = '<ul>'
for (let i = 0; i < n; i++) {
btn = btn + '<li>' + (i + 1) + '</li>'
}
btn = btn + '</ul>'
$(btn).appendTo($('.list')).find('li').first().addClass('on')
function move() {
let i = $('.aa .list li').index($('.aa .list li.on'))
if (i == n - 1) {
i = 0
} else {
i = i + 1 //下一个
}
$('.aa .list li').eq(i).addClass('on').siblings().removeClass('on')
$('.aa .pic li').hide().eq(i).fadeIn(500)
}
timer = setInterval(move, 2000)
$('.aa .list li').click(function() {
let i = $('.aa .list li').index(this)
$('.aa .pic li').hide().eq(i).fadeIn(500)
$(this).addClass('on').siblings('li').removeClass('on')
})
$('.aa').mouseenter(function() {
clearInterval(timer)
})
$('.aa').mouseleave(function() {
timer = setInterval(move, 2000)
})
})
</script>
</head>
<body>
<div class="aa">
<div class="pic">
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
</div>
<div class="list"></div>
</div>
</body>
</html>
Comments | NOTHING