剛剛學習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" onmouseover="aa()" onmouseout="aa1()">
<div class="lunbo">
<img src="img_lunbo/1.jpg" alt="" id="img_i">
</div>
<span id="s1" onclick="beat(1)"> <span class="s1_1"> < </span></span>
<span id="s2" onclick="beat(2)"> <span class="s2_1"> > </span></span>
<div class="btn">
<span id="ss1" class="ss" onmouseover="aa2(1)"></span>
<span id="ss2" class="ss" onmouseover="aa2(2)"></span>
<span id="ss3" class="ss" onmouseover="aa2(3)"></span>
<span id="ss4" class="ss" onmouseover="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