<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#banner{
width: 720px;
height: 600px;
margin: 0 auto;
}
#middle{
width: 720px;
height: 64px;
position: relative;
top: -280px;
left: 0px;
visibility: hidden;
}
#middle .left{
width: 70px;
height: 64px;
float: left;
background:url("img/icon-goleft-null.png") no-repeat;
}
#middle .right{
width: 70px;
height: 64px;
float: right;
background:url("img/go-right.png") no-repeat;
}
ul{
list-style: none;
}
li{
width: 16px;
height: 16px;
border-radius: 8px;
background: #ffffff;
color: #000;
margin-left: 8px;
text-align: center;
line-height: 16px;
float: left;
position: relative;
top: -120px;
left: 250px;
cursor: pointer;
}
.active{
background: red;
color: white;
}
</style>
<script>
</script>
</head>
<body>
<div id="banner">
<img src="" alt="">
<div id="middle">
<span class="left"></span>
<span class="right"></span>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
var oImg = document.getElementsByTagName('img')[0];
var oDiv = document.getElementById('banner');
var oDiv2 = document.getElementById('middle');
var oPrev = document.getElementsByTagName('span')[0];
var oNext = document.getElementsByTagName('span')[1];
var aLi =document.getElementsByTagName('li');
var arr = ['img/yys_banner1.jpg','img/yys_banner2.jpg','img/yys_banner3.jpg','img/yys_banner4.jpg','img/yys_banner5.jpg'];
oImg.src = arr[0];
var num = 0;
var timer = null;
function fnTab() {
oImg.src=arr[num];
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
aLi[num].className = 'active';
}
fnTab();
timer = setInterval(function () {
go();
}, 1000);
for( var i=0; i<aLi.length; i++ ){
aLi[i].index = i; // 索引值
aLi[i].onclick = function (){
num = this.index;
fnTab();
};
}
oDiv.onmouseover = function () {
oDiv2.style.visibility = 'visible';
clearInterval(timer);
};
oDiv.onmouseout = function () {
oDiv2.style.visibility = 'hidden';
timer = setInterval(function () {
go();
}, 1000);
};
oPrev.onclick = function () {
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
aLi[num].className = 'active';
oImg.src=arr[num];
num--;
if (num===-1){
num=arr.length-1;
}
};
oNext.onclick = function () {
go();
};
function go() {
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
num++;
if (num==arr.length){
num=0;
}
oImg.src=arr[num];
aLi[num].className = 'active';
}
</script>
</body>
</html>
JS简单实现仿网页图片轮播
需积分: 49 64 浏览量
2017-10-30
17:00:41
上传
评论 3
收藏 625KB ZIP 举报
JavaScript之简单实现图片轮播.zip （13个子文件） 
JavaScript之简单实现图片轮播 img 
icon-goleft-null.png 5KB
yys_banner2.jpg 143KB yys_banner5.jpg 109KB yys_banner4.jpg 122KB yys_banner3.jpg 117KB go-right.png 5KB yys_banner1.jpg 120KB .idea 
misc.xml 216B modules.xml 308B dictionaries ASUS.xml 85B workspace.xml 14KB inspectionProfiles JavaScript平时作业练习.iml 458B
阴阳师.html 4KB资源评论
