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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
Prototype Number对象 学习
Jul 19 Javascript
javascript 面向对象 function类
May 13 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
Python中for循环详解
2014/01/17 Python
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python自动发邮件脚本
2017/03/31 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python求解正态分布置信区间教程
2019/11/20 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
干部下基层实施方案
2014/03/14 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
离婚协议书格式
2014/11/21 职场文书
前台岗位职责
2015/02/13 职场文书