代码
<!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=utf-8" />
<title>js图片切换代码_by 阿里西西</title>
<style type="text/css">
/* Reset style */
*
{
margin: 0;
padding: 0;
word-break: break-all;
}
body
{
background: #FFF;
color: #333;
font: 12px/1.6em Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6
{
font-size: 1em;
}
a
{
color: #0287CA;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
ul, li
{
list-style: none;
}
fieldset, img
{
border: none;
}
legend
{
display: none;
}
em, strong, cite, th
{
font-style: normal;
font-weight: normal;
}
input, textarea, select, button
{
font: 12px Helvetica, Arial, sans-serif;
}
table
{
border-collapse: collapse;
}
html
{
overflow: -moz-scrollbars-vertical;
}
/*Always show Firefox scrollbar*/
/* iFocus style */
#ifocus
{
width: 525px;
height: 245px;
margin: 20px;
border: 1px solid #DEDEDE;
background: #F8F8F8;
}
#ifocus_pic
{
display: inline;
position: relative;
float: left;
width: 410px;
height: 225px;
overflow: hidden;
margin: 10px 0 0 10px;
}
#ifocus_piclist
{
position: absolute;
}
#ifocus_piclist li
{
width: 410px;
height: 225px;
overflow: hidden;
}
#ifocus_piclist img
{
width: 410px;
height: 225px;
}
#ifocus_btn
{
display: inline;
float: right;
width: 91px;
margin: 9px 9px 0 0;
}
#ifocus_btn li
{
width: 91px;
height: 57px;
cursor: pointer;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
#ifocus_btn img
{
width: 75px;
height: 45px;
margin: 7px 0 0 11px;
}
#ifocus_btn .current
{
background: url(http://www.byzuo.cn/demo/iFocus/img/ifocus_btn_bg.gif) no-repeat;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
#ifocus_opdiv
{
position: absolute;
left: 0;
bottom: 0;
width: 410px;
height: 35px;
background: #000;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
#ifocus_tx
{
position: absolute;
left: 8px;
bottom: 8px;
color: #FFF;
}
#ifocus_tx .normal
{
display: none;
}
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function moveElement(elementID, final_x, final_y, interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos) / 10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x) / 10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos) / 10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y) / 10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
elem.movement = setTimeout(repeat, interval);
}
function classNormal(iFocusBtnID, iFocusTxID) {
var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
for (var i = 0; i < iFocusBtns.length; i++) {
iFocusBtns[i].className = 'normal';
iFocusTxs[i].className = 'normal';
}
}
function classCurrent(iFocusBtnID, iFocusTxID, n) {
var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
iFocusBtns[n].className = 'current';
iFocusTxs[n].className = 'current';
}
function iFocusChange() {
if (!$('ifocus')) return false;
$('ifocus').onmouseover = function() { atuokey = true };
$('ifocus').onmouseout = function() { atuokey = false };
var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
var listLength = iFocusBtns.length;
iFocusBtns[0].onmouseover = function() {
moveElement('ifocus_piclist', 0, 0, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 0);
}
if (listLength >= 2) {
iFocusBtns[1].onmouseover = function() {
moveElement('ifocus_piclist', 0, -225, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 1);
}
}
if (listLength >= 3) {
iFocusBtns[2].onmouseover = function() {
moveElement('ifocus_piclist', 0, -450, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 2);
}
}
if (listLength >= 4) {
iFocusBtns[3].onmouseover = function() {
moveElement('ifocus_piclist', 0, -675, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 3);
}
}
}
setInterval('autoiFocus()', 5000);
var atuokey = false;
function autoiFocus() {
if (!$('ifocus')) return false;
if (atuokey) return false;
var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
var listLength = focusBtnList.length;
for (var i = 0; i < listLength; i++) {
if (focusBtnList[i].className == 'current') var currentNum = i;
}
if (currentNum == 0 && listLength != 1) {
moveElement('ifocus_piclist', 0, -225, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 1);
}
if (currentNum == 1 && listLength != 2) {
moveElement('ifocus_piclist', 0, -450, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 2);
}
if (currentNum == 2 && listLength != 3) {
moveElement('ifocus_piclist', 0, -675, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 3);
}
if (currentNum == 3) {
moveElement('ifocus_piclist', 0, 0, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 0);
}
if (currentNum == 1 && listLength == 2) {
moveElement('ifocus_piclist', 0, 0, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 0);
}
if (currentNum == 2 && listLength == 3) {
moveElement('ifocus_piclist', 0, 0, 5);
classNormal('ifocus_btn', 'ifocus_tx');
classCurrent('ifocus_btn', 'ifocus_tx', 0);
}
}
addLoadEvent(iFocusChange);
</script>
</head>
<body>
<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left: 0; top: 0;">
<ul>
<li><a href="#">
<img src="http://www.alixixi.com/web/UploadPic/2009-5/2009521171722840.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://www.alixixi.com/web/UploadPic/2009-5/2009521171724211.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://www.alixixi.com/web/UploadPic/2009-5/2009521171727260.jpg" alt="" /></a></li>
<li><a href="#">
<img src="http://www.alixixi.com/web/UploadPic/2009-5/2009521171731813.jpg" alt="" /></a></li>
</ul>
</div>
<div id="ifocus_opdiv">
</div>
<div id="ifocus_tx">
<ul>
<li class="current">阿里西西Web开发 专业Web开发领域..</li>
<li class="normal">Alixixi.com Web开发</li>
<li class="normal">WEB开发之家 http://www.alixixi.com</li>
<li class="normal">阿里西西,源码,模板,教程,站长,程序员,技术论坛...</li>
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul>
<li class="current"><a href="http://www.alixixi.com" target="_blank">
<img src="http://www.alixixi.com/web/UploadPic/2009-5/2009521171722840.jpg" alt="" /></a></li>
<li class="normal"><a href="http://www.alixixi.com" target="_blank">
<img src="http://www.alixixi.com/web/UploadPic/2009-5/2009521171724211.jpg" alt="" /></a></li>
<li class="normal"><a href="http://www.alixixi.com" target="_blank">
<img src="http://www.alixixi.com/web/UploadPic/2009-5/2009521171727260.jpg" alt="" /></a></li>
<li class="normal"><a href="http://www.alixixi.com" target="_blank">
<img src="http://www.alixixi.com/web/UploadPic/2009-5/2009521171731813.jpg" alt="" /></a></li>
</ul>
</div>
</div>
<!--ifocus end-->
</body>
</html>
根据需要修改了一下，并把原来代码中$(id)方法替换成jquery方法，代码如下：
代码
<!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>
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
word-break: break-all;
}
ul, li
{
list-style: none;
}
fieldset, img
{
border: none;
}
table
{
border-collapse: collapse;
}
html
{
overflow: -moz-scrollbars-vertical;
}
#ifocus
{
width: 235px;
height: 160px;
margin: 0px;
border: 1px solid #DEDEDE;
background: #F8F8F8;
}
#ifocus_pic
{
display: inline;
position: relative;
float: left;
width: 235px;
height: 160px;
overflow: hidden;
margin: 0px;
}
#ifocus_piclist
{
position: absolute;
}
#ifocus_piclist li
{
width: 235px;
height: 160px;
overflow: hidden;
}
#ifocus_piclist img
{
width: 235px;
height: 160px;
}
#ifocus_opdiv
{
position: absolute;
left: 0;
bottom: 0;
width: 235px;
height: 35px;
background: #000;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
#ifocus_tx
{
position: absolute;
left: 8px;
bottom: 8px;
color: #FFF;
}
#ifocus_tx .normal
{
display: none;
}
</style>
<script src="JS/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
<script type="text/javascript">
var currentNum = 0;
var sh = 160;
var listLength;
//function $(id) { return document.getElementById(id); }
function moveElement(elementID, final_x, final_y, interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos) / 10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x) / 10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos) / 10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y) / 10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
elem.movement = setTimeout(repeat, interval);
}
function classNormal(iFocusTxID) {
var iFocusTxs = $("#"+iFocusTxID)[0].getElementsByTagName('li');
for (var i = 0; i < listLength; i++) {
iFocusTxs[i].className = 'normal';
}
}
function classCurrent(iFocusTxID, n) {
var iFocusTxs = $("#"+iFocusTxID)[0].getElementsByTagName('li');
iFocusTxs[n].className = 'current';
}
var t=setInterval('autoiFocus()', 4000);
function autoiFocus() {
if (!$('#ifocus')) return false;
listLength = ($('#ifocus_piclist')[0].getElementsByTagName('li')).length;
currentNum++;
if (currentNum == listLength)
currentNum = 0;
var moveNum = 0;
moveNum = 0 - (currentNum * sh);
moveElement('ifocus_piclist', 0, moveNum, 5);
classNormal('ifocus_tx');
classCurrent('ifocus_tx', currentNum);
}
function moveUp() {
if(currentNum==0)
currentNum=listLength-1;
else
currentNum--;
var moveNum = 0;
moveNum = 0 - (currentNum * sh);
moveElement('ifocus_piclist', 0, moveNum, 5);
classNormal('ifocus_tx');
classCurrent('ifocus_tx', currentNum);
clearInterval(t);
t=setInterval('autoiFocus()', 4000);
}
function moveDown(){
autoiFocus();
clearInterval(t);
t=setInterval('autoiFocus()', 4000);
}
</script>
</head>
<body>
<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left: 0; top: 0;">
<ul>
<li><a href="#">
<img style=" width:235px; height:160px" src="1.jpg" alt="" /></a></li>
<li><a href="#">
<img style=" width:235px; height:160px" src="2.jpg" alt="" /></a></li>
<li><a href="#">
<img style=" width:235px; height:160px" src="3.jpg" alt="" /></a></li>
<li><a href="#">
<img style=" width:235px; height:160px" src="4.jpg" alt="" /></a></li>
</ul>
</div>
<div id="ifocus_opdiv">
</div>
<div id="ifocus_tx">
<ul>
<li class="current">1111111111..</li>
<li class="normal">22222222</li>
<li class="normal">333333333</li>
<li class="normal">4444444444...</li>
</ul>
</div>
</div>
</div>
<input type="button" value="上一个" onclick="moveUp()" />
<input type="button" value="下一个" onclick="moveDown()" />
</body>
</html>
浙公网安备 33010602011771号