您的位置：首页 > Web前端 > JavaScript

js轮播图

2015-11-10 10:01 495 查看 
<!DOCTYPE html">
<html" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>images slide</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
img {
border: 0;
}
a {
text-decoration: none;
}
#slide {
width: 530px;
height:300px;
box-shadow: 0px 0px 5px #c1c1c1;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#slide ul {
position: absolute;
left: 0px;
top: 0px;
height:300px;
width: 11930px;
}
#slide ul li {
width: 530px;
height: 300px;
overflow: hidden;
float: left;
}
#slide .ico {
width: 530px;
height: 20px;
overflow: hidden;
text-align: center;
position: absolute;
left: 0px;
bottom: 10px;
z-index: 1;
}
#slide .ico a {
display: inline-block;
width: 10px;
height:10px;
background: #fff;
margin: 0px 5px;
border-radius: 50%;
}
#slide .ico .active {
background:red;
}
#btnLeft {
width: 60px;
height:60px;
line-height: 60px;
left: 0px;
top:120px;
background: rgba(0,0,0,0.2);
position: absolute;
z-index: 2;
border-radius: 50%;
text-align: center;
font-size: 30px;
color: #fff;
}
#btnLeft:hover {
background: rgba(0,0,0,0.8);
}
#btnRight {
width: 60px;
height:60px;
line-height: 60px;
right: 0px;
top:120px;
background: rgba(0,0,0,0.2);
position: absolute;
z-index: 2;
border-radius: 50%;
text-align: center;
font-size: 18px;
color: #fff;
}
#btnRight:hover {
background: rgba(0,0,0,0.8);
}

</style>

<script type="text/javascript">
window.onload = function() {
var oIco = document.getElementById("ico");
var aBtn = oIco.getElementsByTagName("a");
var oSlide = document.getElementById("slide");
var oUl = oSlide.getElementsByTagName("ul");
var aLi = oUl[0].getElementsByTagName("li");
var oBtnLeft = document.getElementById("btnLeft");
var oBtnRight = document.getElementById("btnRight");

//获取每个li的宽度
var baseWidth = aLi[0].offsetWidth;
//            alert(baseWidth);
//设置外围ul的总宽度
oUl[0].style.width = baseWidth * aLi.length + "px";
var iNow = 0;

//获取焦点圆点 点击的时候显示
for(var i=0;i<aBtn.length;i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
//alert(this.index);
//alert(oUl[0].style.left);
move(this.index);
//aIco[this.index].className = "active";
}
}
//左侧点击
oBtnLeft.onclick = function() {
iNow ++;
//document.title = iNow;
move(iNow);
}
//右侧点击
oBtnRight.onclick = function() {
iNow --;
document.title = iNow;
move(iNow);
}

var curIndex = 0;
var timeInterval=3000 ;
setInterval(change,timeInterval);
function change() {
if(curIndex == aBtn.length) {
curIndex =0;
} else {
move(curIndex);
curIndex += 1;
}
}
//设置函数
function move(index) {
//document.title = index; 超过数组的长度，重置index=0
if(index>aLi.length-1) {
index = 0;
iNow = index;
}
//小于0的时候 设置index=数组最大的
if(index<0) {
index = aLi.length - 1;
iNow = index;
}
//设置焦点颜色
for(var n=0;n<aBtn.length;n++) {
aBtn
.className = "";
}
aBtn[index].className = "active";

//ul宽度滚动
oUl[0].style.left = -index * baseWidth + "px";
//buffer(oUl[0],{
// left: -index * baseWidth
// },8)

}
}
</script>
</head>
<body>
<div id="slide">
<a id="btnLeft" href="javascript:void(0);" >></a>
<a id="btnRight" href="javascript:void(0);" ><</a>
<!--when change next image:style="left: -(n-1)*800px;"-->
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
</ul>
<div id="ico" class="ico">
<a class="active" href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航