jQuery轮播图
《---fadeIn轮播----》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style type="text/css">
*{margin:0px;padding: 0px;list-style: none;}
div{width:400px;height:300px;margin:100px auto;position: relative;}
#images{width: 400px;height: 300px;position: relative;}
#images li{width: 400px;height: 300px;position: absolute;left:0px;top:0px;display: none;}
#images li:first-child{display: block;}
#numbers{position: absolute;bottom:10px;right:5px;z-index:20;}
#numbers li{width: 20px;height: 20px;background: #ccc;border:10px solid #666;margin-left: 5px;color: #000;float:left;line-height: center;text-align: center;cursor: pointer;}
#numbers .a{background: #E97305;color:#fff;}
</style>
</head>
<body>
<div>
<ul id="images">
<li><img src="./sunli/1.jpg" width="100%" alt=""></li>
<li><img src="./sunli/2.jpg" width="100%" alt=""></li>
<li><img src="./sunli/3.jpg" width="100%" alt=""></li>
<li><img src="./sunli/4.jpg" width="100%" alt=""></li>
<li><img src="./sunli/5.jpg" width="100%" alt=""></li>
</ul>
<ul id="numbers">
<li class="a">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var index=0;//当前正在显示的图片的索引
var inte=null;
//给数字下标绑定鼠标移入和移出事件
$('#numbers li').hover(function(){
//清楚定时器
clearInterval(inte);
//获取当前数字下标元素的索引
index=$(this).index();
//显示图片
show(index);
},function(){
autorun();
})
//显示指定索引的图片
function show(i){
//隐藏同辈的图片
$('#images li').eq(i).siblings().hide();
$('#images li').eq(i).fadeIn();
//移出其他的数字下标为a
$('#numbers li').eq(i).siblings().removeClass('a');
//是当前这个元素添加a类
$('#numbers li').eq(i).addClass('a');
}
//自动运行
function autorun(){
inte=setInterval(function(){
//索引自增
index++;
//检测索引是否越界
if(index==5){
index=0;
}
show(index);
},2000);
}
autorun();
</script>
</body>
</html>
《---向左滚动轮播---》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style type="text/css">
*{margin:0px;padding:0px;list-style:none;}
div{width:400px;height:300px;border:solid 1px #ddd;margin:100px auto;position:relative;overflow:hidden;}
#images{width:2000px;height:300px;position:absolute;}
#images li{width:400px;height:300px;float:left;}
#images li:first-child{display:block;}
#numbers{position:absolute;bottom:0px;right:0px;z-index:20;}
#numbers li{width:20px;height:20px;float:left;margin-right:10px;border:solid 1px #ddd;text-align:center;font-size:14px;line-height:20px;cursor:pointer;}
#numbers .active{background:black;color:white;}
</style>
</head>
<body>
<div>
<ul id="images">
<li><img src="./sunli/1.jpg" width="100%" alt=""></li>
<li><img src="./sunli/2.jpg" width="100%" alt=""></li>
<li><img src="./sunli/3.jpg" width="100%" alt=""></li>
<li><img src="./sunli/4.jpg" width="100%" alt=""></li>
<li><img src="./sunli/5.jpg" width="100%" alt=""></li>
</ul>
<ul id="numbers">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var index = 0;//当前正在显示的图片的索引
var inte = null;
//给数字下标绑定鼠标移入和移出事件
$('#numbers li').hover(function(){
//清空定时器
clearInterval(inte);
//获取当前数字下标元素的索引
// var i = $(this).html()-1;
index = $(this).index();
//显示图片
show(index);
}, function(){
autoRun();
});
//显示指定索引的图片
function show(i){
//计算left的值0 0 1 -400 2 -800 3 -1200 n n*(-400)
var newLeft = i*(-400);
//使用动画函数
$('#images').animate({
left: newLeft+'px'
},500)
//移出其他的数字下标的active
$('#numbers li').eq(i).siblings().removeClass('active');
//使当前这个元素添加active类
$('#numbers li').eq(i).addClass('active');
}
//自动运行
function autoRun(){
inte = setInterval(function(){
//索引自增
index++;
//检测索引是否越界
if(index == 5){
index = 0;
}
show(index);
},2000);
}
//鼠标放到图片上后停止定时器
$('#images').hover(function(){
clearInterval(inte);
},function(){
autoRun();
})
autoRun();
</script>
</body>
</html>
