轮播图
html代码部分
<div id="main"> <div id="img_box"> <a href="#"><img src="img/1.jpg"></a> <a href="#"><img src="img/2.jpg"></a> <a href="#"><img src="img/3.jpg"></a> <a href="#"><img src="img/4.jpg"></a> <a href="#"><img src="img/5.jpg"></a> </div> <div id="icon_box"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <a href="" class="arrow" id="prev"><</a> <a href="" class="arrow" id="next">></a> </div>
css代码部分
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
#main {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
#img_box {
position: absolute;
z-index: 1;
}
#img_box img {
width: 600px;
height: 400px;
float: left;
}
#icon_box {
width: 600px;
height: 20px;
position: absolute;
bottom: 20px;
left: 200px;
z-index: 2;
}
#icon_box li {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
margin-right: 5px;
background: rgba(0,0,0,0.3);
float: left;
}
.on {
background: rgba(255,0,0,0.8) !important;
}
.arrow {
width: 40px;
height: 40px;
line-height: 40px;
background: rgba(0,0,0,0.2);
top: 200px;
position: absolute;
text-align: center;
font-size: 35px;
font-weight: bold;
color: #fff;
display: none;
z-index: 2;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
#main:hover .arrow {
display: block;
}
#prev:hover {
background: rgba(0,0,0,0.7);
}
#next:hover {
background: rgba(0,0,0,0.7);
}
鼠标经过原点时会显示相对应的图片，使用闭包保证点和图片相对应，设置循环变量为0，在闭包执行时让m = i来保证保证，当鼠标在循环原点按钮之后再点击左右按钮依然正确从现在的位置开始循环
<script>
var main = document.getElementById("main");
var imgs = document.getElementById("img_box").getElementsByTagName('img');
var icon = document.getElementById("icon_box").getElementsByTagName('li');
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var m = 0;//设置循环变量
// img控制函数
function imgShown(m){
for(var i=0;i<imgs.length;i++) {
imgs[i].style.display = 'none';
}
imgs[i].style.display = 'block';
}
// 原点控制
function buttonShown(m){
for(var i=0;i<icon.length;i++) {
if(icon[i].className == 'on') {
icon[i].className = '';
}
}
icon[i].className = 'on';
}
//使用闭包来控制显示
for(var i=0; i<imgs.length;i++){
(function(i){
icon[i].ommouseover = function() {
imgShown(i);
buttonShown(i);
m = i;
}
})(i);
}
</script>
向左按键显示
prev.onclick = function() {
m -= 1;
if(m < 0) {
m = 4;
}
imgShown(m);
buttonShown(m);
return false;
}
向右按键显示
next.onclick = function() {
m += 1;
if(m > 4) {
m = 0;
}
imgShown(m);
buttonShown(m);
}
设置时间自动轮播和清楚时间定时
function play() {
timer = setInterval(function() {
m++;
if(m >= imgs.length;) {
m = 0;
}
imgShown(m);
buttonShown(m);
},1500);
}
funtion.stop() {
clearInterval(timer);
}
main.onmouseover = stop;
main.onmouseout = play;
play()
O(∩_∩)O哈哈~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播综合</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
#main {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
#img_box {
position: absolute;
z-index: 1;
}
#img_box img {
width: 600px;
height: 400px;
float: left;
}
#icon_box {
width: 600px;
height: 20px;
position: absolute;
bottom: 20px;
left: 200px;
z-index: 2;
}
#icon_box li {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
margin-right: 5px;
background: rgba(0,0,0,0.3);
float: left;
}
.on {
background: rgba(255,0,0,0.8) !important;
}
.arrow {
width: 40px;
height: 40px;
line-height: 40px;
background: rgba(0,0,0,0.2);
top: 200px;
position: absolute;
text-align: center;
font-size: 35px;
font-weight: bold;
color: #fff;
display: none;
z-index: 2;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
#main:hover .arrow {
display: block;
}
#prev:hover {
background: rgba(0,0,0,0.7);
}
#next:hover {
background: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div id="main">
<div id="img_box">
<a href="#"><img src="img/1.jpg"></a>
<a href="#"><img src="img/2.jpg"></a>
<a href="#"><img src="img/3.jpg"></a>
<a href="#"><img src="img/4.jpg"></a>
<a href="#"><img src="img/5.jpg"></a>
</div>
<div id="icon_box">
<ul>
<li class="on">1</li>
<li >2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<a href="" class="arrow" id="prev"><</a>
<a href="" class="arrow" id="next">></a>
</div>
<script>
window.onload = function() {
var main = document.getElementById("main");
var imgs = document.getElementById("img_box").getElementsByTagName('img');
var icon = document.getElementById("icon_box").getElementsByTagName('li');
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var m = 0;//设置循环变量
// img控制按钮
function imgShown(m) {
for( var i = 0; i < imgs.length; i++){
imgs[i].style.display = 'none'
}
imgs[m].style.display = 'block';
}
// icon控制按钮
function buttonShown(m) {
for( var i=0; i<icon.length; i++){
if(icon[i].className == 'on') {
icon[i].className = '';
}
}
icon[m].className = 'on';
}
//给所有的控制图片的按钮 绑定 鼠标划过事件
for (var i = 0; i < imgs.length; i++) {
(function(i){
icon[i].onmouseover = function (){
imgShown(i);
buttonShown(i);
m = i;
}
})(i)
}
// 箭头点击事件
prev.onclick = function() {
m -= 1;
if( m < 0) {
m = 4;
}
imgShown(m);
buttonShown(m);
return false;
}
next.onclick = function() {
m += 1;
if( m > 4) {
m = 0;
}
imgShown(m);
buttonShown(m);
return false;
}
//设置定时器
function play() {
// timer = setInterval(run,1500);
timer = setInterval(function run() {
m++;
if( m >= imgs.length) {
m = 0;
}
imgShown(m);
buttonShown(m);
},1500);
}
function stop() {
clearInterval(timer);
}
main.onmouseover = stop;
main.onmouseout = play;
play();
}
</script>
</body>
</html>
