轮播效果图如下:
1. 自动播放（鼠标划入显示区域时停止播放,鼠标划出显示区域时继续播放）
2. 点击左右箭头切换图片
3. 底下小圆圈点击切换对应的图片
下面是实现代码
css样式
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
div {
width: 800px;
height: 300px;
border: solid 2px red;
margin: 10% auto;
position: relative;
}
ul li {
display: none;
}
ul li img {
width: 800px;
height: 300px;
}
ol {
position: absolute;
bottom: 20px;
}
ol li {
width: 30px;
height: 30px;
border-radius: 50%;
background: blue;
font-size: 20px;
line-height: 30px;
text-align: center;
float: left;
margin: 0px 25px;
}
span {
position: absolute;
width: 60px;
height: 50px;
background: darksalmon;
color: aliceblue;
line-height: 50px;
text-align: center;
top: 50%;
margin-top: -40px;
font-size: 40px;
}
#left {
left: 10px;
}
#right {
right: 10px;
}
ul .love {
display: block;
}
ol .love {
background: blueviolet;
}
</style>
HTML部分, 图片自己在网上随便找几张
<body>
<div>
<ul>
<li class="love"><img src="./img/movie1.jpg" alt=""></li>
<li><img src="./img/movie2.jpg" alt=""></li>
<li><img src="./img/movie3.jpg" alt=""></li>
<li><img src="./img/movie4.jpg" alt=""></li>
<li><img src="./img/movie5.jpg" alt=""></li>
<li><img src="./img/movie6.jpg" alt=""></li>
<li><img src="./img/movie7.jpg" alt=""></li>
<li><img src="./img/movie8.jpg" alt=""></li>
<li><img src="./img/movie9.jpg" alt=""></li>
<li><img src="./img/movie10.jpg" alt=""></li>
</ul>
<ol>
<li class="love">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ol>
<span id="left">
<
</span>
<span id="right">
>
</span>
</div>
</body>
JS部分
<script>
var div = document.querySelector('div') //获取大盒子
var ul_li = document.querySelectorAll('ul li') //获取ul下的所有li
var ol_li = document.querySelectorAll('ol li') //获取ol下的所有li
var left = document.querySelector('#left') //获取左边的箭头
var right = document.querySelector('#right') //获取右边的箭头
var index = 0, timer = null;
//函数封装点击右边
function auto() {
index++
if (index >= ul_li.length) {
index = 0
}
getLed(index)
}
//点击右边
right.onclick = function () {
auto()
}
//点击左边
left.onclick = function () {
index--
if (index < 0) {
index = ul_li.length - 1
}
getLed(index)
}
function getLed(ind) {
for (var j = 0; j < ul_li.length; j++) {
ul_li[j].classList.remove('love')
ol_li[j].classList.remove('love')
}
ul_li[index].classList.add('love')
ol_li[index].classList.add('love')
}
//定时器自动播放
timer = setInterval(auto, 1000) //每隔1秒执行一次
//鼠标划入停止定时器
div.onmousemove = function () {
clearInterval(timer)
timer = null
}
//鼠标划出执行定时器
div.onmouseout = function () {
timer = setInterval(auto, 1000)
}
//点击图片导航 切换图片
for (var i = 0; i < ol_li.length; i++) {
(function (ind) {
ol_li[ind].onclick = function () {
getLed(index = ind)
}
})(i)
}
</script>
网友评论