JS 轮播图
Posted 纪宇-年华
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 轮播图相关的知识，希望对你有一定的参考价值。
JS轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS轮播图</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#center {
width: 800px;
height: 600px;
margin: auto;
background-color: black;
background-image: url("http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg");
}
/*左右箭头*/
#ul1 {
position: relative;
top: 40%;
}
#ul1 li {
font-size: 80px;
color: white;
}
/*四个点*/
#ul2 {
position: relative;
top: 92%;
}
#ul2 li {
width: 20px;
height: 20px;
border: 3px slateblue solid;
/*透明度*/
opacity: 0.7;
/*将li的边框设置为圆*/
border-radius: 50%;
float: left;
margin-left: 10px;
position: relative;
left: 30%;
}
#ul1 li:hover {
color: aqua;
}
#ul2 li:hover {
background-color: darkseagreen;
}
</style>
<body>
<div id="center">
<ul id="ul1">
<!--绑定单击事件的方法，上下翻图-->
<li><span style="float:left" onclick="previous()"><</span></li>
<li><span style="float: right" onclick="next()">></span></li>
</ul>
<ul id="ul2">
<li class="li_dot" style="background-color: darkseagreen;"></li>
<li class="li_dot"></li>
<li class="li_dot"></li>
<li class="li_dot"></li>
</ul>
</div>
<script type="text/javascript">
img1 = "url('http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg')";
img2 = "url('http://www.datongchun.com/upload/image/20150817101824_89175.jpg')";
img3 = "url('http://img2.imgtn.bdimg.com/it/u=1563165482,1097507544&fm=214&gp=0.jpg')";
img4 = "url('http://hiphotos.baidu.com/%D4%C6%C8%B8%B5%C4%B3%E7%B0%DD%D5%DF/pic/item/c6ba270b9a23e670e9248891.jpg')";
// 定时器，每两秒播放一次
setInterval(next,2000);
// 计算图片索引
var count = 1;
//获取圆点
var li_dot = document.getElementsByClassName("li_dot");
//鼠标悬停在对应圆点时，显示对应的图片
li_dot[0].onmouseenter = function () {count=1;show(count)};
li_dot[1].onmouseenter = function () {count=2;show(count)};
li_dot[2].onmouseenter = function () {count=3;show(count)};
li_dot[3].onmouseenter = function () {count=4;show(count)};
//获取图片div
var div_img = document.getElementById("center");
//下一张
function next() {
count += 1;
if (count > 4) {
count = 1;
}
show(count);
}
// 上一张
function previous() {
count -= 1;
if (count < 1) {
count = 4
}
show(count);
}
//清除所有圆点的背景颜色
function clearLiBC() {
for(i=0;i<=3;i++){
//背景颜色透明
li_dot[i].style.backgroundColor="transparent";
}
}
// 显示对应索引的图
function show(index) {
switch (index) {
case 1:
div_img.style.backgroundImage = img1;
// 清除所有圆点的背景色
clearLiBC();
// 只给当前图片对应的圆点设置背景色
li_dot[0].style.backgroundColor = "darkseagreen";
break;
case 2:
div_img.style.backgroundImage = img2;
clearLiBC();
li_dot[1].style.backgroundColor = "darkseagreen";
break;
case 3:
div_img.style.backgroundImage = img3;
clearLiBC();
li_dot[2].style.backgroundColor = "darkseagreen";
break;
case 4:
div_img.style.backgroundImage = img4;
clearLiBC();
li_dot[3].style.backgroundColor = "darkseagreen";
break;
}
}
</script>
</body>
</html>以上是关于JS 轮播图的主要内容，如果未能解决你的问题，请参考以下文章