JS焦点图切换，上下翻转

146 阅读 0 评论 97 点赞

我是靠谱客的博主美好雪糕，最近开发中收集的这篇文章主要介绍JS焦点图切换，上下翻转，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!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>mypaly</title> 
<style type="text/css"> 
* { margin:0; padding:0;} 
ul, li { list-style:none;} 
body{ 
text-align:center; 
} 
#play{ 
width:400px; 
height:300px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-155px 0 0 -205px; 
overflow:hidden; 

} 
#playimg{ 
width:400px; 
height:300px; 
position:absolute; 
} 
#playimg li{ 
height:300px; 
overflow:hidden; 
} 
#playimg img{ 
width:400px; 
height:300px; 
} 
#playbtn{ 
position:absolute; 
left:0; 
bottom:5px; 
} 
#playbtn li{ 
display:inline; 
background:#eee; 
padding:2px 5px; 
margin:0 3px; 
cursor:pointer; 
} 
#playbtn .current{ 
background:#f0f; 
} 
</style> 
<script type="text/javascript"> 
function $(id){return document.getElementById(id)} 
function moveElement(elementID,final_x,final_y,interval) {//这个方法在DOM艺术那个书上讲的很清楚 
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 imgChange(num){//切换图片焦点 
if(!$('play')) return false; 
var piclist=$('playimg').getElementsByTagName('img'); 
var imgheight=piclist[0].offsetHeight; 
var moveY=-(imgheight*num); 
moveElement('playimg',0,moveY,5); 
} 
function classToggle(arr,n){//切换按钮样式 
for(var i=0;i<arr.length;i++){ 
arr[i].className=''; 
} 
arr[n].className='current'; 
} 
function btnChange(btns){//鼠标移动播放 
if(!$(btns)) return false; 
$('play').onmouseover = function(){autokey = false}; 
$('play').onmouseout = function(){autokey = true}; 
var arr=$(btns).getElementsByTagName('li'); 
for(var i=0;i<arr.length;i++){ 
arr[i].index=i;//设置索引号 
arr[i].onmouseover=function(){ 
//var num=index(this,arr); 
classToggle(arr,this.index); 
imgChange(this.index); 
} 
} 
} 
function autoChange(btns){ 
if(!$(btns)) return false; 
if(!autokey) return false; 
var arr=$(btns).getElementsByTagName('li'); 
for(var i=0;i<arr.length;i++){ 
if(arr[i].className=='current'){ 
var n=i+1; 
} 
} 
if(n>=arr.length) n=0; 
classToggle(arr,n); 
imgChange(n); 
} 
var autokey = true; 
setInterval("autoChange('playbtn')",3000); 
window.onload=function(){ 
btnChange('playbtn'); 
} 
</script> 
</head> 

<body> 
<div id="play"> 
<ul id="playimg"> 
<li><img src="../images/Blue hills.jpg" alt="" /></li> 
<li><img src="../images/Sunset.jpg" alt="" /></li> 
<li><img src="../images/Water lilies.jpg" alt="" /></li> 
<li><img src="../images/Winter.jpg" alt="" /></li> 
</ul> 
<ul id="playbtn"><li class="current">1</li><li>2</li><li>3</li><li>4</li></ul> 
</div> 
</body> 
</html> 