這個(gè)輪播圖沒(méi)包括無(wú)縫滾動(dòng)
image.png
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js"></script>
</head>
<body>
<!-------------最外層容器----------------->
<div class="box">
<!-----------------放圖片的容器------------------->
<div class="imglist" id="imglist">
<ul>
<li class="current"><a href="#"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
</ul>
</div>
<!----------------------放左右按鈕的容器 --------------------------->
<div class="btn">
<span class="leftbtn" id="left"></span>
<span class="rightbtn" id="right"></span>
</div>
<!---------------放小圓圈的容器------------>
<div class="circle" id="cicle">
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
css代碼
* {
margin: 0;
padding: 0;
}
.box {
width: 672px;
height: 320px;
/*border: 1px solid #ddd;*/
margin: 100px auto;
position: relative;
}
.imglist ul li img {
width: 672px;
height: 320px;
}
ul {
list-style: none;
}
.imglist ul li {
width: 672px;
height: 320px;
position: absolute;
left: 0;
top: 0;
/*默認(rèn)圖片全部隱藏*/
display: none;
}
/*有current類的圖片顯示*/
.imglist ul li.current {
display: block;
}
.btn span {
width: 24px;
height: 36px;
background: rgba(0,0,0,.5) url(../images/left.png);
position: absolute;
top: 50%;
margin-top: -18px;
}
.btn span.leftbtn {
left: 10px;
}
.btn span.rightbtn {
right: 10px;
background: url(../images/right.png);
}
.circle {
position: absolute;
bottom: 10px;
right: 10px;
}
.circle ul li {
width: 20px;
height: 20px;
background: rgba(0,0,0,.5);
border-radius: 50%;
float: left;
margin-right: 10px;
}
.circle ul li.current {
background-color: #f00;
}
js代碼
window.onload = function(){
//獲取元素
var imglis = document.getElementById("imglist").getElementsByTagName("li");
var leftbtn = document.getElementById("left");
var rightbtn = document.getElementById("right");
var circlelis = document.getElementById("cicle").getElementsByTagName("li");
//信號(hào)量
var index = 0;
rightbtn.onclick = function(){
index++;
changePic();
}
leftbtn.onclick = function(){
index--;
changePic();
}
//小圓點(diǎn)批量監(jiān)聽(tīng)
for (var i = 0;i < circlelis.length;i++){
//綁定自定義屬性
circlelis[i].idx = i;
circlelis[i].onmouseover = function(){
//鼠標(biāo)進(jìn)入小圓點(diǎn)時(shí)要更改index值
index = this.idx;
//調(diào)用圖片切換的函數(shù)
changePic();
}
}
function changePic(){
if (index > imglis.length-1)index = 0;
if (index < 0)index = imglis.length - 1;
//根據(jù)信號(hào)量index做排他,實(shí)現(xiàn)圖片的切換
for (var i = 0;i < imglis.length;i++){
imglis[i].className = '';
}
imglis[index].className = 'current';
//根據(jù)信號(hào)量index做排他,實(shí)現(xiàn)小圓點(diǎn)的切換
for (var i = 0;i < imglis.length;i++){
circlelis[i].className = '';
}
circlelis[index].className = 'current';
}
}
