JS焦点图切换,上下翻转


Posted in Javascript onMay 12, 2011
<!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>
Javascript 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript数组方法总结分析
May 06 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
js 中{},[]中括号,大括号使用详解
May 12 #Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 #Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 #Javascript
Jqyery中同等与js中windows.onload的应用
May 10 #Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 #Javascript
JavaScript中为元素加上name属性的方法
May 09 #Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 #Javascript
You might like
PHP 中dirname(_file_)讲解
2007/03/18 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
谈谈如何手动释放Python的内存
2016/12/17 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python try...finally...的实现方法
2020/11/25 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
成品仓管员工作职责
2013/12/29 职场文书
个性发展自我评价
2014/02/11 职场文书
家长对老师的感言
2014/03/11 职场文书
花坛标语大全
2014/06/30 职场文书
小学元宵节活动总结
2015/02/06 职场文书
python实现简单倒计时功能
2021/04/21 Python
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
Python 正则模块详情
2021/11/02 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js