html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图</title>
<style type="text/css">
.focusBox{
position: absolute;
top: 340px;
width: 120px;
left: 50%;
margin-left: -60px;
list-style: none;
margin-top: 0px;
margin-bottom: 0px;
}
.focusBox li{
float: left;
margin-right:10px;
width: 15px;
height: 15px;
border-radius: 10px;
background: gray;
cursor: pointer;
}
.focusBox li.cur{
background: #f60;
opacity: 0.6;
filter: alpha(opacity=60);
}
#focus{
margin: 0 auto;
padding: 0px;
text-align: center;
border: red solid 1px;
width: 710px;
}
</style>
</head>
<body>
<div id="focus">
<img src="img/index/pic1.jpg" width="690px" height="350px" id="focusImg"/>
<ul class="focusBox">
<li οnclick="showPic(1);"></li>
<li οnclick="showPic(2);"></li>
<li οnclick="showPic(3);"></li>
</ul>
</div>
<script src="js/pictureSlide.js" type="text/javascript" charset="utf-8"></script>
<!--<script>
var sign=2;
function showPic (index) {
var focusImg=document.getElementById("focusImg");
var imgSrc="img/index/pic";
imgSrc=imgSrc+index+".jpg";
focusImg.src=imgSrc;
var lis =document.getElementsByClassName("focusBox")[0].getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
lis[i].className="";
}
lis[index-1].className="cur";
}
function setCurrentPic () {
showPic(sign);
sign++;
if (sign==4) {
sign=1;
}
}
window.οnlοad=function () {
showPic(1);
}
window.setInterval("setCurrentPic()",2000);
</script>-->
</body>
</html>
js代码
// 图片轮播效果
//用于标识当前轮播到第几幅图片
var sign = 2;
//显示轮播图片
function showPic(index) {
//轮播效果,中当前显示的图片
var focusImg = document.getElementById("focusImg");
//图片路径
var imgSrc = "img/index/pic";
imgSrc =imgSrc+ index + ".jpg";
//更换轮播图片
focusImg.src = imgSrc;
//获取圆点列表
var lis = document.getElementsByClassName("focusBox")[0].getElementsByTagName("li");
//移除所有轮播按钮的css样式
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
//设置轮播图片对应的轮播按钮样式
lis[index - 1].className = "cur";
}
//对轮播图片进行计算处理
function setCurrentPic() {
showPic(sign);
sign++;
if (sign == 4) {
sign = 1;
}
}
//窗体加载时,指定显示的图片
window.onload = function () {
showPic(1);
}
//设置定时器
window.setInterval("setCurrentPic()",1500);