核心提示：页面轮播图代码实现教程html页面!DOCTYPE htmlhtmlheadmeta charset=utf-8 /title/titlelink rel=stylesheet href=css/cs...
页面轮播图代码实现教程
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/css.css" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//手动轮播
var length = $('#img li').length;
for(i = 1;i <= length; i ++){
var li = '<li>' + i + '</li>';
$('#button').append(li);
}
$('#img li').eq(0).show();
$('#button').eq(0).addClass('action');
$('#button li').mouseover(function(){
$(this).addClass('action').siblings().removeClass('action');
var index = $(this).index();
$('#img li').eq(index).fadeIn(500).siblings().fadeOut(500);
})
//自动轮播
var i = 0;
var t = setInterval(move,1000);
function move(){
i ++;
if(i == size){
i = 0;
}
$('#button li').eq(i).addClass('action').siblings().removeClass('action');
$('#img li').eq(i).fadeIn(500).siblings().fadeOut(500);
}
//鼠标放上去,停止轮播.移开继续轮播
$('#banner').hover(function(){
clearInterval(t);
},function(){
t = setInterval(move,1000);
})
//左右轮播
$('#banner .left').click(function(){
move_left();
})
$('#banner .right').click(function(){
move();
})
function move_left(){
i--;
if(i==-1){
i = size - 1;
}
$('#button li').eq(i).addClass('action').siblings().removeClass('action');
$('#img li').eq(i).fadeIn(500).siblings().fadeOut(500);
}
})
</script>
</head>
<body>
<p id = 'banner'>
<ul id = 'img'>
<li><a href="#"><img src = 'img/1.jpg'></a></li>
<li><a href="#"><img src = 'img/2.jpg'></a></li>
<li><a href="#"><img src = 'img/3.jpg'></a></li>
<li><a href="#"><img src = 'img/4.jpg'></a></li>
<li><a href="#"><img src = 'img/5.jpg'></a></li>
</ul>
<ul id = 'button'>
<!--<li class ='action'>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>-->
</ul>
<!--class里面的那个空格,相当风骚-->
<p class = 'left btn'><</p>
<p class = 'right btn'>></p>
</p>
</body>
</html>
css页面
@charset "utf-8";
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #000000;}
body{font-size: 1em;color: #000000;}
.clear{clear: both;}
ul{list-style: none;}
img{border: none;vertical-align:bottom;}
#banner{width: 80%;height: 500px;position: absolute;top: 100px;bottom: 0;left: 10%;right: 0;}
#banner #img li img{width: 100%;height: 500px;}
#banner #img li {position:absolute;width: 100%;height: 500px;display: block;}
#button li{width: 20px;height: 20px;background: #ADC0D4;z-index: 100;margin: 10px 10px;display: inline-block;
font-size: 1em;border-radius: 50%;text-align: center;cursor: pointer;}
#button{position: absolute;top: 420px;left: 520px;}
#banner #button .action{background: red;}
#banner .btn{z-index:100;position: absolute;top: 50%;width: 70px;height: 70px;display:none;background: rgba(0,0,0,0.2);
font-size: 50px;text-align: center;color: #FF9500;cursor: pointer;}
#banner .left{left: 0;}
#banner .right{right: 0;}
#banner:hover .btn{display: block;}
