刚刚学习JavaScript,以为自己写不出来轮播图,这几天用一个超级简单的方法写轮播图,居然实现了,新手可以试试很容易写和学。大神的话,你当然会的,我就不说了,哈哈。
效果图如下:
个人感觉很好用,如果你是新手,不妨来学学吧,超级简单的思想,哈哈。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 520px;
height: 280px;
margin: 100px auto;
position: relative;
background-color: #00bcd4;
cursor: pointer;
}
.box #s1,.box #s2{
position: absolute;
display: none;
width: 25px;
height: 45px;
background-color: #000;
opacity: 0.1;
text-align: center;
line-height: 45px;
}
.box #s1{
left: 0px;
top: 120px;
}
.box #s2{
right: 0px;
top: 120px;
}
.box .s1_1,.box .s2_1{
color: #fff;
font-size: 20px;
opacity: 1;
}
.box #s1:hover{
opacity: 0.4;
}
.box #s2:hover{
opacity: 0.5;
}
.btn{
position: absolute;
width: 65px;
height: 20px;
background-color: #a6ff7f;
bottom: 30px;
left: 230px;
}
.btn span{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #00bcd4;
}
</style>
</head>
<body>
<div class="box" οnmοuseοver="aa()" οnmοuseοut="aa1()">
<div class="lunbo">
<img src="img_lunbo/1.jpg" alt="" id="img_i">
</div>
<span id="s1" οnclick="beat(1)"> <span class="s1_1"> < </span></span>
<span id="s2" οnclick="beat(2)"> <span class="s2_1"> > </span></span>
<div class="btn">
<span id="ss1" class="ss" οnmοuseοver="aa2(1)"></span>
<span id="ss2" class="ss" οnmοuseοver="aa2(2)"></span>
<span id="ss3" class="ss" οnmοuseοver="aa2(3)"></span>
<span id="ss4" class="ss" οnmοuseοver="aa2(4)"></span>
</div>
</div>
</body>
<script type="text/javascript">
var i=1;
function beat(t)
{
if(t==4)
{
i--;
if(i==0)
{
i=4;
}
document.getElementById("img_i").src="img_lunbo/"+i+".jpg";
btn_ss();
}
else{
i++;
if(i==5){
i=1;
}
document.getElementById("img_i").src="img_lunbo/"+i+".jpg";
btn_ss();
}
}
function aaa(){
i++;
if(i==5)
{
i=1;
}
document.getElementById("img_i").src="img_lunbo/"+i+".jpg";
btn_ss();
}
var a=setInterval(aaa,2000);
function aa(){
clearInterval(a);
document.getElementById("s1").style.display="block";
document.getElementById("s2").style.display="block";
}
function aa1()
{
a=setInterval(aaa,2000);
document.getElementById("s1").style.display="none";
document.getElementById("s2").style.display="none";
}
function btn_ss(){
for (var w=0;w<document.getElementsByClassName("ss").length;w++)
{
document.getElementsByClassName("ss")[w].style.backgroundColor="#00bcd4";
}
document.getElementById("ss"+i+"").style.backgroundColor="red";
}
function aa2(w){
i=w;
// alert(t);
btn_ss();
document.getElementById("img_i").src="img_lunbo/"+i+".jpg";
}
</script>
</html>
图片资源在百度云上:
链接:http://pan.baidu.com/s/1hrRJaCG 密码:2e95