<html>
<header>
<title>JQUERY图片滑动</title>
<script src="jquery.min.js"></script>
<header>
<body>
<style>
ul{
list-style:none;
margin:0px;
padding:0px;
}
ul li{
list-style:none;
float:left;
}
.imgSilder{
overflow:hidden;
}
</style>
<div class="imgSilder" style="margin:0 auto; position:relative; ">
<ul style="position:relative; width:2000px">
<li>
<img src="image/1.jpg"/>
</li>
<li>
<img src="image/2.jpg"/>
</li>
<li>
<img src="image/3.jpg"/>
</li>
<li>
<img src="image/5.jpg"/>
</li>
</ul>
</div>
<div id="scrollNum" style="text-align:center">
</div>
<script>
var imgWidth = 332;
var diaplayNum = 2;
var imgNum = 4;
var imgMargin = 2;
var imgHeight = 221;
var i = 0;
var speed = 5000
$(document).ready(function(){
var boxWidth = imgWidth*diaplayNum + (diaplayNum-1)*imgMargin;//宽度
var boxHeight = imgHeight;//高度
var ulWidth = imgNum*imgWidth+imgNum*imgMargin;//UL宽度
$(".imgSilder").css({width:boxWidth,height:boxHeight,margin:"0 auto"});
$(".imgSilder li").css("margin-right",imgMargin);
$(".imgSilder ul li").css("float","left");
$(".imgSilder ul").css("width",ulWidth);
var t = setInterval("scrollLeft()",speed);
$(".imgSilder ul li").mouseover(function(){
clearInterval(t);
});
$(".imgSilder ul li").mouseout(function(){
t = setInterval("scrollLeft()",speed);
});
var numLi = '';
for(var i=1;i<=imgNum-diaplayNum+1;i++){
numLi += '<a style="padding:5px 8px;background:#a0aed5;margin:3px">'+i+'</a>';
}
$("#scrollNum").css({width:boxWidth,margin:"0 auto",padding:"18px"});
$("#scrollNum").html(numLi);
$("#scrollNum a:eq(0)").css("background","#e1d68e");
$("#scrollNum a").mouseover(function(){
var a = parseInt($(this).html())-1;
console.log(a);
scrollLeft(a);
clearInterval(t);
$(this).css("background","#e1d68e").siblings().css("background","#a0aed5");
i = a;
});
$("#scrollNum a").mouseout(function(){
t = setInterval("scrollLeft()",speed);
});
});
function scrollLeft(a){
i++;
if(a || a == 0){
i = a;
}
console.log(a);
var left = i*(imgWidth+imgMargin);
$("#scrollNum a:eq("+i+")").css("background","#e1d68e").siblings().css("background","#a0aed5");
if(i>imgNum-diaplayNum){
$(".imgSilder ul").animate({left:0});
$("#scrollNum a:eq("+0+")").css("background","#e1d68e").siblings().css("background","#a0aed5");
i=0;
}else{
$("#scrollNum a:eq("+i+")").css("background","#e1d68e").siblings().css("background","#a0aed5");
$(".imgSilder ul").animate({left:-left});
}
}
</script>
</body>
</html>
<header>
<title>JQUERY图片滑动</title>
<script src="jquery.min.js"></script>
<header>
<body>
<style>
ul{
list-style:none;
margin:0px;
padding:0px;
}
ul li{
list-style:none;
float:left;
}
.imgSilder{
overflow:hidden;
}
</style>
<div class="imgSilder" style="margin:0 auto; position:relative; ">
<ul style="position:relative; width:2000px">
<li>
<img src="image/1.jpg"/>
</li>
<li>
<img src="image/2.jpg"/>
</li>
<li>
<img src="image/3.jpg"/>
</li>
<li>
<img src="image/5.jpg"/>
</li>
</ul>
</div>
<div id="scrollNum" style="text-align:center">
</div>
<script>
var imgWidth = 332;
var diaplayNum = 2;
var imgNum = 4;
var imgMargin = 2;
var imgHeight = 221;
var i = 0;
var speed = 5000
$(document).ready(function(){
var boxWidth = imgWidth*diaplayNum + (diaplayNum-1)*imgMargin;//宽度
var boxHeight = imgHeight;//高度
var ulWidth = imgNum*imgWidth+imgNum*imgMargin;//UL宽度
$(".imgSilder").css({width:boxWidth,height:boxHeight,margin:"0 auto"});
$(".imgSilder li").css("margin-right",imgMargin);
$(".imgSilder ul li").css("float","left");
$(".imgSilder ul").css("width",ulWidth);
var t = setInterval("scrollLeft()",speed);
$(".imgSilder ul li").mouseover(function(){
clearInterval(t);
});
$(".imgSilder ul li").mouseout(function(){
t = setInterval("scrollLeft()",speed);
});
var numLi = '';
for(var i=1;i<=imgNum-diaplayNum+1;i++){
numLi += '<a style="padding:5px 8px;background:#a0aed5;margin:3px">'+i+'</a>';
}
$("#scrollNum").css({width:boxWidth,margin:"0 auto",padding:"18px"});
$("#scrollNum").html(numLi);
$("#scrollNum a:eq(0)").css("background","#e1d68e");
$("#scrollNum a").mouseover(function(){
var a = parseInt($(this).html())-1;
console.log(a);
scrollLeft(a);
clearInterval(t);
$(this).css("background","#e1d68e").siblings().css("background","#a0aed5");
i = a;
});
$("#scrollNum a").mouseout(function(){
t = setInterval("scrollLeft()",speed);
});
});
function scrollLeft(a){
i++;
if(a || a == 0){
i = a;
}
console.log(a);
var left = i*(imgWidth+imgMargin);
$("#scrollNum a:eq("+i+")").css("background","#e1d68e").siblings().css("background","#a0aed5");
if(i>imgNum-diaplayNum){
$(".imgSilder ul").animate({left:0});
$("#scrollNum a:eq("+0+")").css("background","#e1d68e").siblings().css("background","#a0aed5");
i=0;
}else{
$("#scrollNum a:eq("+i+")").css("background","#e1d68e").siblings().css("background","#a0aed5");
$(".imgSilder ul").animate({left:-left});
}
}
</script>
</body>
</html>