前言：
努力向上的开拓，才使弯曲的竹鞭化作了笔直的毛竹
--------------------------------正文---------------------------------
js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 700px;
margin: 100px auto;
position: relative;
}
.box ul li{
width: 100%;
height: 100%;
display: none;
}
.box ul li.active{
display: block;
}
.box ul li img{
width: 100%;
height: 100%;
}
.box ol{
width: 200px;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -100px;
}
.box ol li{
float: left;
width: 20px;
height: 20px;
background: #ccc;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.box ol li.active{
background: #f90;
}
.box .btn{
position: absolute;
top: 50%;
margin-top: -30px;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
text-decoration: none;
background: rgba(0,0,0,0.5);
display: none;
}
.box .btn.prev{
left: 0;
}
.box .btn.next{
right: 0;
}
.box:hover .btn{
display: block;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var oUl = oBox.getElementsByTagName('ul')[0];
var oOl = oBox.getElementsByTagName('ol')[0];
var aBtn = oOl.getElementsByTagName('li');
var aLi = oUl.getElementsByTagName('li');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var timer = null;
var iNow = 0; //当前是第几个
function tab(iNow){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className = '';
aLi[i].className = '';
}
aBtn[iNow].className = 'active';
aLi[iNow].className = 'active';
}
for(var i=0;i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
iNow = this.index;
tab(iNow);
};
}
function fnNext(){
iNow++;
if(iNow==aBtn.length){
iNow = 0;
}
tab(iNow);
}
oNext.onclick = fnNext;
oPrev.onclick = function(){
iNow--;
if(iNow<0){
iNow = aBtn.length-1;
}
tab(iNow);
};
timer = setInterval(fnNext,3000);
oBox.onmouseover = function(){
clearInterval(timer);
};
oBox.onmouseout = function(){
timer = setInterval(fnNext,3000);
};
};
</script>
</head>
<body>
<div id="box" class="box">
<ul>
<li class="active">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<a href="javascript:;" class="btn prev" id="prev">prev</a>
<a href="javascript:;" class="btn next" id="next">next</a>
</div>
</body>
</html>
jQuery代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#slider{
width: 700px;
height: 393px;
margin: 0 auto;
position: relative;
left: 0;
top: 0;
overflow: hidden;
}
#slider ul{
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
#slider ul li{
width: 700px;
float: left;
}
#slider ul li img{
width: 100%;
}
#slider ol{
position: absolute;
left: 50%;
bottom: 20px;
overflow: hidden;
width: 200px;
margin-left: -100px;
}
#slider ol li{
float: left;
width: 20px;
height: 20px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
#slider ol li.active{
background: #f90;
}
#slider a{
position: absolute;
top: 50%;
width: 150px;
height: 80px;
text-align: center;
line-height: 80px;
margin-top: -40px;
color: #fff;
background: rgba(0,0,0,0.5);
display: none;
}
#slider #prev{
left: 0;
}
#slider #next{
right: 0;
}
#slider a:hover{
background: rgba(255,200,0,0.5);
}
#slider:hover a{
display: block;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
var iNow = 0;
$('#slider ul').css({
width: $('#slider ul li').length*$('#slider ul li').width()+'px'
});
$('#slider').on('click','ol li',function(){
iNow = $(this).index();
tab();
});
function tab(){
$('#slider ol li').siblings('li').removeClass('active');
$('#slider ol li').eq(iNow).addClass('active');
$('#slider ul').stop().animate({
left: -iNow*$('#slider ul li').width()+'px'
},500);
}
$('#slider #next').on('click',function(){
iNow++;
if(iNow==$('#slider ul li').length){
iNow = 0;
}
tab();
});
$('#slider #prev').on('click',function(){
iNow--;
if(iNow<0){
iNow = $('#slider ul li').length-1;
}
tab();
});
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<a href="javascript:;" id="prev">prev</a>
<a href="javascript:;" id="next">next</a>
</div>
</body>
</html>
网友评论