<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动的焦点图</title>
<script src="WebUI/js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
/*****************需要引入的js***********************************************************/
<script type="text/javascript" src="WebUI/js/focus.js" charset="utf-8"></script>
<style type="text/css">
.container{width:100%;height:500px;margin:100px auto 0px;}
.focus{width:1200px;height:100%;margin:0px auto ;overflow: hidden;position:relative;}
/******************ul 的大小要大一点方便存放多张图片***************************************/
.focus ul{width:8000px;height:100%;margin:0px;padding:0px;}
.focus ul li{width:1200px;height:100%;list-style:none;float:left; overflow:hidden ;}
/****************点击按钮的样式*****************************/
.btn_ape,.btn_pre{width:50px;height:50px;position:absolute;z-index:100;top:225px;cursor:pointer;}
.btn_pre{left:50px;background:url(WebUI/images/icons_cb372887.png) no-repeat left top;}
.btn_ape{right:50px;background:url(WebUI/images/icons_cb372887.png) no-repeat right top;}
</style>
/*******************透明图片在ie6中仍然会有灰色阴影，加上下面的语句就可以兼容ie6，pngfix.js在网上自己找，其他的原样书写即可*********************************************/
<!--[if IE 6]>
<script src="pngfix.js" mce_src="pngfix.js"></script>
<script type="text/javascript">DD_belatedPNG.fix(‘*‘);</script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="focus">
<ul>
/***************************要展示的图片*****************************************/
<li>
<a href="javascript://"><img src="WebUI/images/f01.jpg" /></a>
</li>
<li>
<a href="javascript://"><img src="WebUI/images/f02.jpeg" /></a>
</li>
<li>
<a href="javascript://"><img src="WebUI/images/f03.jpg" /></a>
</li>
<li>
<a href="javascript://"><img src="WebUI/images/f04.jpg" /></a>
</li>
<li>
<a href="javascript://"><img src="WebUI/images/f05.jpg" /></a>
</li>
</ul>
/******************两个点击的按钮*****************************************/
<div class="btn_pre"></div>
<div class="btn_ape"></div>
</div>
</div>
</body>
</html>
/*****************************focus.js***********************************/
$(function() {
Animate(); //函数调用
/************左边按钮点击事件************************************/
$(".btn_pre").click(function() {
if(!isRun){
_index--;
Focus();
}
});
/*******************右边按钮点击事件******************************************/
$(".btn_ape").click(function() {
if (!isRun) {
_index++;
Focus();
}
});
/**********************鼠标悬停时停止轮播，鼠标离开时继续轮播，这个不是很灵敏（得多移动鼠标才能有效），在找原因******************************/
$(".focus ul").mouseover(function() {
clearTimeout(interval);
}).mouseleave(function() {
clearTimeout(interval);
Animate();
});
});
/******************************定义全局变量*******************************************/
var _index = 0;
var _length = 5;
var isRun = false;
window.interval;
function Animate() {
/***********************setTimeOut是只执行一次而setInterval是间隔2000ms（自己设置）循环执行**************************/
interval = setInterval(function() {
if (!isRun) {
_index++;
Focus(); //调用函数
}
}, 2000);
}
function Focus() {
clearTimeout(interval);
/**清除setInterval的循环***/
isRun = true;
var first = 0;
/************如果是第一张图片时，图片向左切换*******************/
/***************原理就是当图片是第一张而这个时候你要点击左边按钮让它从右往左走，这个时候添加一个li放在ul的li中的最后面，然后让整个ul向左移动，这样可以弥补切换时有空白间隙************/
if (_index == -1) {
$(".focus ul").css("margin-left", -1200 * _length + "px");
$(".focus ul").append("<li>" + $(".focus ul li:first").html() + "</li>");
_index = _length - 1;
first = 1;
}
/*********************如果是最后一张图片***************************************/
/***************原理就是当图片是最后一张而这个时候你要点击右边按钮让它从左往右走或者自动走，这个时候添加一个li放在ul的li中的最前面，然后让整个ul向右移动，这样可以弥补切换时有空白间隙****************/
if (_index == _length) {
$(".focus ul").css("margin-left", 0);
$(".focus ul ").prepend("<li>" + $(".focus ul li:last").html() + "</li>");
_index = 1;
first = 2;
}
/***********************************让图片以动画形式移动,其中500ms是图片切换过程中的时间********************************************/
$(".focus ul").animate({
"margin-left": (-1200 * _index) + "px"
}, 500, function() {
isRun = false;
Animate();
if (first == 1) {
/*****************删除添加的li ********************************/
$(".focus ul li:last").remove();
}
if (first == 2) {
if (_index == 1) {
_index = 0;
$(".focus ul").css("margin-left", "0px");
}
/*****************删除添加的li ********************************/
$(".focus ul li:first").remove();
$(".focus ul").css("margin-left", "0px");
}
});
}