效果要求:
1.鼠标不在图片上方时,进行自动轮播,并且左右箭头不会显示;当鼠标放在图片上方时,停止轮播,并且左右箭头会显示;
2.图片切换之后,图片中下方的小圆点会同时进行切换,并且点击相应的小圆点可以切
换到相应的图片上;
3.点击左右箭头可以进行左右图片的切换;
4.图片上需有介绍的文字,会随图片切换一起进行切换。
实现原理:
为相应的函数绑定单击响应函数,鼠标移入响应函数,鼠标移出响应函数
创建一个名字为cutImg
的循环计时器,使得在默认状态下,轮播图能够自动播放
在鼠标移入函数里面,设置清除cutImg
计时器,并且在鼠标移除后,创新启用计时器
再用for循环控制小圆点和提示文字的样式
同理再对小圆点和提示文字设置相应的鼠标移入函数,和鼠标移除函数
做到移入和移出的时候改变小圆点和提示文字的样式
代码展示:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="out" id="out">
<div class="img" id="img">
<img src="./img/img1.jpg" alt="" />
<ul id="cut">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<span id="lt" class="lt"><a href="#"><</a></span>
<span id="gt" class="gt"><a href="#">></a></span>
</div>
<div class="button" id="button">
<ul>
<li>生肖秘宝</li>
<li>次元召唤</li>
<li>你的商店</li>
<li>电竞名场面</li>
<li>新春献礼</li>
</ul>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
css
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.out{
width: 1200px;
margin: 0 auto;
margin-top: 30px;
}
.img{
width: 820px;
height: 340px;
margin: 0 auto;
position: relative;
}
.img img{
transition: all 1s;
}
.lt{
width: 25px;
height: 35px;
border-radius: 0 10px 10px 0;
background-color: #999;
opacity: 0.5;
color: white;
font-size: 20px;
line-height: 35px;
text-align: center;
position: absolute;
top: 152px;
left: 0;
display:none;
}
.gt{
width: 25px;
height: 35px;
border-radius:10px 0 0 10px;
background-color: #999;
opacity: 0.5;
color: white;
font-size: 20px;
line-height: 35px;
text-align: center;
position: absolute;
top: 152px;
right: 0;
display: none;
}
.img:hover .lt{
display:block;
}
.img:hover .gt{
display:block;
}
.img ul{
margin: 0 auto;
position: absolute;
bottom: 5px;
left: 350px;
width: 120px;
height: 10px;
display: flex;
justify-content: space-between;
}
.img ul li{
width: 10px;
height: 10px;
background-color: gray;
border-radius: 50%;
}
.img ul li a{
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.button ul{
margin: 0 auto;
background-color: #E3E2E2;
width: 820px;
height: 38px;
display: flex;
justify-content: space-between;
}
.button ul li{
width: 164px;
height: 38px;
box-sizing: border-box;
background-color: #F7F6F6;
line-height: 38px;
text-align: center;
font-size: 16px;
}
.button ul li:hover{
background-color: white;
color: #d1d100;
border-bottom: 3px solid #d1d100;
}
js
window.onload = function () {
// 获取元素节点
var img = document.getElementById("img")
var imgs = img.getElementsByTagName("img")[0]
var button = document.getElementById("button")
var button_ul = button.getElementsByTagName("ul")[0]
var button_li = button_ul.getElementsByTagName("li")
var lt = document.getElementById("lt")
var gt = document.getElementById("gt")
var lt_a = lt.getElementsByTagName("a")[0]
var gt_a = gt.getElementsByTagName("a")[0]
var cut = document.getElementById("cut")
var cut_a = cut.getElementsByTagName("a")
// 创建图片src地址数值
var arrImg = ["./img/img1.jpg", "./img/img2.jpg", "./img/img3.jpg", "./img/img4.jpg", "./img/img5.jpg"]
// 添加默认计时器
var indexTime = 0
cut_a[indexTime].style.backgroundColor = "black"
button_li[indexTime].style.backgroundColor = "white"
button_li[indexTime].style.color = "#d1d100"
button_li[indexTime].style.borderBottom = "3px solid #d1d100"
var cutImg = setInterval(function () {
indexTime++
if (indexTime >= arrImg.length) {
indexTime = 0
}
button_li[indexTime].style.backgroundColor = "white"
button_li[indexTime].style.color = "#d1d100"
button_li[indexTime].style.borderBottom = "3px solid #d1d100"
cut_a[indexTime].style.backgroundColor = "black"
var qx = indexTime - 1
if (qx < 0) {
qx = cut_a.length - 1
}
cut_a[qx].style.backgroundColor = "#999"
button_li[qx].style.backgroundColor = "#F7F6F6"
button_li[qx].style.color = "black"
button_li[qx].style.borderBottom = "0"
imgs.src = arrImg[indexTime]
console.log(indexTime)
}, 1500)
//设置鼠标移入和移出时候的删除和添加计时器
img.onmouseenter = function () {
clearInterval(cutImg)
}
img.onmouseleave = function () {
cutImg = setInterval(function () {
indexTime++
if (indexTime >= arrImg.length) {
indexTime = 0
}
button_li[indexTime].style.backgroundColor = "white"
button_li[indexTime].style.color = "#d1d100"
button_li[indexTime].style.borderBottom = "3px solid #d1d100"
cut_a[indexTime].style.backgroundColor = "black"
var qx = indexTime - 1
if (qx < 0) {
qx = cut_a.length - 1
}
cut_a[qx].style.backgroundColor = "#999"
button_li[qx].style.backgroundColor = "#F7F6F6"
button_li[qx].style.color = "black"
button_li[qx].style.borderBottom = "0"
imgs.src = arrImg[indexTime]
console.log(indexTime)
}, 1500)
}
button_ul.onmouseenter = function () {
clearInterval(cutImg)
}
button_ul.onmouseleave = function () {
cutImg = setInterval(function () {
indexTime++
if (indexTime >= arrImg.length) {
indexTime = 0
}
button_li[indexTime].style.backgroundColor = "white"
button_li[indexTime].style.color = "#d1d100"
button_li[indexTime].style.borderBottom = "3px solid #d1d100"
cut_a[indexTime].style.backgroundColor = "black"
var qx = indexTime - 1
if (qx < 0) {
qx = cut_a.length - 1
}
cut_a[qx].style.backgroundColor = "#999"
button_li[qx].style.backgroundColor = "#F7F6F6"
button_li[qx].style.color = "black"
button_li[qx].style.borderBottom = "0"
imgs.src = arrImg[indexTime]
console.log(indexTime)
}, 1500)
}
//为两个切换按钮绑定单击响应函数
lt_a.onclick = function () {
indexTime--
if (indexTime < 0) {
indexTime = arrImg.length - 1
}
button_li[indexTime].style.backgroundColor = "white"
button_li[indexTime].style.color = "#d1d100"
button_li[indexTime].style.borderBottom = "3px solid #d1d100"
imgs.src = arrImg[indexTime]
cut_a[indexTime].style.backgroundColor = "black"
var qx = indexTime + 1
if (qx >= cut_a.length) {
qx = 0
}
cut_a[qx].style.backgroundColor = "#999"
button_li[qx].style.backgroundColor = "#F7F6F6"
button_li[qx].style.color = "black"
button_li[qx].style.borderBottom = "0"
}
gt_a.onclick = function () {
indexTime++
if (indexTime >= arrImg.length) {
indexTime = 0
}
button_li[indexTime].style.backgroundColor = "white"
button_li[indexTime].style.color = "#d1d100"
button_li[indexTime].style.borderBottom = "3px solid #d1d100"
imgs.src = arrImg[indexTime]
cut_a[indexTime].style.backgroundColor = "black"
var qx = indexTime - 1
if (qx < 0) {
qx = cut_a.length - 1
}
cut_a[qx].style.backgroundColor = "#999"
button_li[qx].style.backgroundColor = "#F7F6F6"
button_li[qx].style.color = "black"
button_li[qx].style.borderBottom = "0"
}
//设置每个小圆点的单击响应函数
function aOnclick(x) {
cut_a[x].onclick = function () {
indexTime = x
imgs.src = arrImg[x]
for (var j = 0; j < cut_a.length; j++){
button_li[j].style.backgroundColor = "#F7F6F6"
button_li[j].style.color = "black"
button_li[j].style.borderBottom = "0"
}
button_li[x].style.backgroundColor = "white"
button_li[x].style.color = "#d1d100"
button_li[x].style.borderBottom = "3px solid #d1d100"
}
}
// 为每个小圆点绑定单击响应函数
for (var i = 0; i < cut_a.length; i++) {
aOnclick(i)
}
// 设置匹配到各个小圆点的图片时,小圆点的背景颜色
function aOnmouseenter(x){
cut_a[x].onmouseenter = function () {
for (var j = 0; j < cut_a.length; j++){
cut_a[j].style.backgroundColor = "#999"
}
cut_a[x].style.backgroundColor = "black"
}
}
function aOnmouseleave(x){
cut_a[x].onmouseleave = function () {
for (var j = 0; j < cut_a.length; j++){
cut_a[j].style.backgroundColor = "#999"
}
cut_a[indexTime].style.backgroundColor = "black"
}
}
//为每个小圆点绑定鼠标移入函数
for(var i=0;i<cut_a.length;i++){
aOnmouseenter(i)
}
//为每个小圆点绑定鼠标移出函数
for(var i=0;i<cut_a.length;i++){
aOnmouseleave(i)
}
// 设置提示文字的鼠标移入函数
function button_liOnmouseenter(x){
button_li[x].onmouseenter = function(){
imgs.src = arrImg[x]
indexTime = x
for(var k = 0;k<cut_a.length;k++){
cut_a[k].style.backgroundColor = "#999"
}
cut_a[x].style.backgroundColor = "black"
for (var j = 0; j < cut_a.length; j++){
button_li[j].style.backgroundColor = "#F7F6F6"
button_li[j].style.color = "black"
button_li[j].style.borderBottom = "0"
}
button_li[x].style.backgroundColor = "white"
button_li[x].style.color = "#d1d100"
button_li[x].style.borderBottom = "3px solid #d1d100"
}
}
//为每一个提示文字绑定鼠标移入函数
for(var i = 0;i<button_li.length;i++){
button_liOnmouseenter(i)
}
}
效果展示:
普通轮播图