JS之实现简单的图片轮播
复制即可使用
1：代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的图片轮播</title>
<style type="text/css">
/*图片下数字的整体样式*/
#myUl li {
list-style-type: none;
display: inline-block;
font-size: 24px;
}
/*当前数字的单个样式*/
.current {
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
text-align: center;
border: 2px dotted red;
}
/*轮播图片的样式*/
img{
width:500px;
height:350px;
border-radius: 6px;
box-shadow:2px 3px 2px grey;
}
</style>
</head>
<body>
<img alt="" src="img/1.jpg" id="myImg">
<ul id="myUl">
<li class="current" onclick="selectImg(event);">1</li>
<li onclick="selectImg(event);">2</li>
<li onclick="selectImg(event);">3</li>
<li onclick="selectImg(event);">4</li>
<li onclick="selectImg(event);">5</li>
<li onclick="selectImg(event);">6</li>
<li onclick="selectImg(event);">7</li>
<li onclick="selectImg(event);">8</li>
</ul>
<script type="text/javascript">
// 1、周期性的切换图片，会有个指示器来指明当前是第几个图片
var currentIndex = 0;//当前图片指示器
var myImg = document.getElementById("myImg");
var lis = document.getElementsByTagName("li");
var intervalID;
var imgs = [ "1.jpg", "2.jpg", "3.jpg","4.jpg", "5.jpg","6.jpg", "7.jpg", "8.jpg"];
function chgImg() {
currentIndex = (++currentIndex) % imgs.length;
//切换图片
myImg.src = "img/" + imgs[currentIndex];
//修改指示器的样式,在设置之前我们需要清空已有样式为默认。
chgInditor();
}
intervalID = setInterval(chgImg, 2000);
//2、当鼠标移动到图片上时，停止周期性切换图片
myImg.onmouseover = function() {
clearInterval(intervalID);
}
//3、当鼠标移开时，继续切换图片
myImg.onmouseout = function() {
intervalID = setInterval(chgImg, 2000);
}
//4、当单击某个图片时，直接切换到那张图片
// for (var j = 0; j < lis.length; j++) {
// lis[j].onclick = function(event) {
// currentIndex = parseInt(event.target.innerHTML) - 1;//我希望从我单击的地方往下循环
// myImg.src = "img/" + imgs[currentIndex];
// chgInditor();
// }
// }
//添加1,2,3,4,5,6,7,8的点击事件
function selectImg(event){
currentIndex = parseInt(event.target.innerHTML) - 1;//我希望从我单击的地方往下循环
myImg.src = "img/" + imgs[currentIndex];
chgInditor();
}
//添加1,2,3,4,5,6,7,8的边框样式
function chgInditor() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
lis[currentIndex].className = "current";
}
</script>
</body>
</html>