<html>
<head>
<title>jquery sliders</title>
<style>
#bigger{width:120px;height:80px;overflow:hidden;margin:0px;padding:0px;}
#big {width:840px;margin:0px;padding:0px;position:relative;}
#big div {width:120px;text-align:center;margin:0px;padding:0px;float:left;}
</style>
<script src="jquery.js"></script>
<script>
var justClick = 0;
var timer = new Date().getTime();
window.onload = function() {
var arr = [];
$("#big div").each(function() {
arr.push($(this).position());
}).each(function(i) {
$(this).css({
position : 'absolute',
top : arr[i].top ,
left : arr[i].left
});
});
$("#control button").mouseover(function() {
changePicture($(this));
});
setInterval(function() {
if( (new Date().getTime() - timer) > 2000 ) {
var index = justClick + 1;
if(index == 7) {
index = 0;
}
changePicture($("#control button:eq(" + index + ")"));
timer = new Date().getTime();
}
} , 3000);
};
function changePicture(node) {
var index = node.html() - 1;
var len = $("#big div").length;
if(index != justClick) {
for(var i = 0 ; i < len ; i++) {
$("#big div:eq(" + i + ")").stop(true , true).animate({left : "-=" + (index - justClick) * 120 + "px"} , 300);
}
justClick = index;
timer = new Date().getTime();
}
}
</script>
</head>
<body>
<div id="bigger">
<div id="big">
<div><img src="images/1_s.jpg"></div>
<div><img src="images/2_s.jpg"></div>
<div><img src="images/3_s.jpg"></div>
<div><img src="images/4_s.jpg"></div>
<div><img src="images/5_s.jpg"></div>
<div><img src="images/6_s.jpg"></div>
<div><img src="images/7_s.jpg"></div>
</div>
</div>
<div id="control">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
</div>
</body>
</html>
jquery 简单幻灯片
最新推荐文章于 2022-06-06 21:45:29 发布
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
