jquery轮播图做法
引入jquery文件和图片
<html>
<head><meta charset='utf-8'>
<title>图片轮播</title>
<link rel="stylesheet" type="text/css" href="slider.css">
<script type="text/javascript" src='jquery-1.8.3.js'></script>
<script type="text/javascript" src='slider.js'></script>
</head>
<body>
<div class='all'>
<ul>
<li class='hide'><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
<ol>
<li class='current'>1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</body>
</html>
js:
$(function(){
//获取Ul
var ul = $('.all ul');
var li = $(".all ol li");
//获取所有的ul li
var ili = $(".all ul li");
//获取ul的宽度
var liwidth = $(".all ul li").eq(0).width();
//定义li的当前下标
var _now = 0;
//定义一个空值 接收setInterval的值
var timeid = null;
//获取ul下的li
var new_li = $(".all ul li");
//定义_now2（防止下标不会乱）
var _now2 = 0;
//alert(liwidth)
li.click(function(){
//获取当前li
var _this = $(this);
_now = _this.index();
_this.addClass('current').siblings().removeClass();
//获取当前的索引
var new_val = _this.index();
ul.animate({'left':-liwidth*new_val},500);
})
//显示图片的自动轮播
function slider(){
//alert(1)
if(_now == li.size()-1){
//当图片滚动一遍时，需要把第一张图片放在最后一张
new_li.eq(0).css({
'position':'relative',
'left':ul.width(),
})
_now=0;
}else{
_now++;
}
_now2++;
li.eq(_now).addClass('current').siblings().removeClass();
ul.animate({'left':-liwidth*_now2},500,function(){
//当animate运动完成后 要去除第一个li的position属性
if(_now==0){
new_li.eq(0).css('position','static')
//同时设置整个ul的左边距为0
ul.css('left','0');
//同时设置_now2的值为0
_now2 = 0;
}
});
}
timeid = setInterval(slider,3000);
//当鼠标放在图片上时停止滚动
$('.all').mouseover(function(){
clearInterval(timeid);
})
//到鼠标离开图片时继续滚动
$('.all').mouseout(function(){
timeid = setInterval(slider,3000);
})
})
样式：
*{
margin: 0px;
padding: 0px;
}
li{
list-style-type: none;
}
.all{
width: 500px;
height: 350px;
overflow: hidden;
position: relative;
}
.all ul{
width:1500px;
position: relative;
top:0px;
right: 0px;
border:2px solid red;
}
.all ul li{
width: 500px;
height:350px;
float: left;
}
.current{
background: black;
}
.all ol{
position: absolute;
right: 10px;
bottom: 10px;
}
.all ol li{
width: 16px;
height:16px;
border:1px solid red;
overflow: hidden;
background: yellow;
cursor: pointer;
margin-right:10px;
float: left;
line-height: 16px;
text-align: center;
}
.all ol li.current{
background:green;
}