javascript超级简单的写出轮播图
Posted 你的指尖-有改变世界的力量
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript超级简单的写出轮播图相关的知识，希望对你有一定的参考价值。
刚刚学习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
以上是关于javascript超级简单的写出轮播图的主要内容，如果未能解决你的问题，请参考以下文章