<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自己整理含有图片统计的可自动切换的JS图片切换代码</title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" language="javascript">
global_current_elem = 1;
global_elem_hovered = 0;
var interval_variable = setInterval("autoScroll()",4000);
function scrollToElem(elem) {
jQuery('#aktuals_field').scrollTo('#aktuals'+elem, 500, {easing:'easeInOutExpo', axis:'x' });
set_active_btn(elem);
global_current_elem = elem;
reset_interval();
}
function scrollRight() {
if (global_current_elem == 6) {elem = 1;}
else {elem = global_current_elem + 1;}
jQuery('#aktuals_field').scrollTo('#aktuals'+elem, 1100, {easing:'easeInOutExpo', axis:'x' });
set_active_btn(elem);
global_current_elem = elem;
}
function scrollLefty() {
if (global_current_elem == 1) {elem = 6;}
else {elem = global_current_elem - 1;}
jQuery('#aktuals_field').scrollTo('#aktuals'+elem, 1100, {easing:'easeInOutExpo', axis:'x' });
set_active_btn(elem);
global_current_elem = elem;
}
function autoScroll() {
if(global_elem_hovered == 0 ) {scrollRight();}
}
function set_hover_on() {
global_elem_hovered = 1;
}
function set_hover_off() {
global_elem_hovered = 0;
reset_interval();
}
function set_active_btn(elem) {
jQuery("#aktuals1_btn").removeClass("active");
jQuery("#aktuals2_btn").removeClass("active");
jQuery("#aktuals3_btn").removeClass("active");
jQuery("#aktuals4_btn").removeClass("active");
jQuery("#aktuals5_btn").removeClass("active");
jQuery("#aktuals6_btn").removeClass("active");
jQuery("#aktuals"+elem+"_btn").addClass("active");
}
function reset_interval() {
clearInterval(interval_variable);
interval_variable = setInterval("autoScroll()",4000);
}
</script>
</head>
<body>
<div class="banner">
<div class="image">
<div id="aktuals_field" class="pslist">
<table>
<tr>
<td><div class="ps" id="aktuals1" style="background:url(images/01.jpg);"><div class="background"></div></div></td>
<td><div class="ps" id="aktuals2" style="background:url(images/02.jpg);"><div class="background"></div></div></td>
<td><div class="ps" id="aktuals3" style="background:url(images/03.jpg);"><div class="background"></div></div></td>
<td><div class="ps" id="aktuals4" style="background:url(images/04.jpg);"><div class="background"></div></div></td>
<td><div class="ps" id="aktuals5" style="background:url(images/05.jpg);"><div class="background"></div></div></td>
<td><div class="ps" id="aktuals6" style="background:url(images/06.jpg);"><div class="background"></div></div></td>
</tr>
</table>
</div>
</div>
<div class="number">
<div class="oth">
<a href="#" class="left_btn" onmouseover="set_hover_on();" onmouseout="set_hover_off();" onclick="scrollLefty(); return false;">Prev</a> /
<a href="#" class="right_btn" onmouseover="set_hover_on();" onmouseout="set_hover_off();" onclick="scrollRight(); return false;">Next</a> (
</div>
<div class="num">
<a href="#" id="aktuals1_btn" onclick="scrollToElem(1); return false;" class=active>1</a>
<a href="#" id="aktuals2_btn" onclick="scrollToElem(2); return false;">2</a>
<a href="#" id="aktuals3_btn" onclick="scrollToElem(3); return false;">3</a>
<a href="#" id="aktuals4_btn" onclick="scrollToElem(4); return false;">4</a>
<a href="#" id="aktuals5_btn" onclick="scrollToElem(5); return false;">5</a>
<a href="#" id="aktuals6_btn" onclick="scrollToElem(6); return false;">6</a>
</div>
<div class="oth">of 6)</div>
</div>
</div>
</body>
</html>
jquery图片切换代码并显示当前播放的位置，含数量显示
4星 · 超过85%的资源 需积分: 9 151 浏览量
2011-12-02
16:38:23
上传
评论
收藏 1.13MB ZIP 举报 
自己整理含有图片数量显示的可自动切换的JS代码.zip （11个子文件） 
index.html 4KB
images 
05.jpg 168KB 06.jpg 220KB 02.jpg 172KB 03.jpg 142KB 01.jpg 176KB 04.jpg 263KB js 
jquery.scrollTo-min.js 2KB jquery.easing.1.3.js 5KB jquery.js 56KB css Style.css 910B资源评论
wyanglucky2013-12-05不错 能显示图片数量 很好
sinat_347494542016-10-26如果可以负分 我想选择 根本不能用 不值得下载 浪费我五积分
普通网友2013-10-01不错，可以用！- Freedom02272013-10-25这个打开完全不可以用！！
