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 相关文章推荐
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
Bootstrap表单布局
Jul 19 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 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
2006/12/13 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python 调用有道api接口的方法
2019/01/03 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
尼克松手表官网:Nixon手表
2019/03/17 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
运动会新闻稿
2015/07/17 职场文书
干部培训简讯
2015/07/20 职场文书
公司出差管理制度范本
2015/08/05 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
详解Python中的for循环
2022/04/30 Python