类似于淘宝首页广告图片轮播图效果，同时，点击左右箭头及下方数字键可进行切换图片
1、HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="box">
<img src="img/1.jpg" id="pic"/>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="left" class="bt"><</div>
<div id="right" class="bt">></div>
</div>
</body>
<script src="js/loop.js" type="text/javascript" charset="utf-8"></script>
</html>
2、CSS样式
图片是扒的淘宝的图，宽和高根据图片的实际大小进行修改
*{
margin: 0;
padding: 0;
}
#box{
width: 520px;
height: 260px;
margin: 0 auto;
position: relative;
}
.bt{
width: 50px;
height: 80px;
background-color: rgba(0,0,0,0.2);
color: #fff;
line-height: 80px;
text-align: center;
position: absolute;
top:100px;
display: none;
}
#left{
left: 0;
}
#right{
right: 0;
}
#list{
list-style: none;
position: absolute;
bottom: 20px;
left: 250px;
}
#list li{
float: left;
width: 20px;
height: 20px;
background-color: #aaa;
margin-left: 10px;
line-height: 20px;
text-align: center;
border-radius: 50%;
}
3、js部分
jsLeft.addEventListener(onmouseout,lightColor,false)
jsRight.addEventListener(onmouseout,lightColor,false)
function lightColor(){
this.style.backgroundColor = "rgba(0,0,0,0.2)"
}
jsRight.addEventListener("click",nextPage,false)
function nextPage(){
currentPage++
changePage()
}
jsLeft.addEventListener("click",frontPage,false)
function frontPage(){
currentPage--
changePage()
}
//进入小圆点
for(var i=0;i<jsLisArr.length;i++){
jsLisArr[i].index = i+1
jsLisArr[i].addEventListener("mouseover",function(){
currentPage = parseInt(this.index)
changePage()
},false)
}
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
