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 相关文章推荐
Javascript Object.extend
May 18 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
Vue模板语法中数据绑定的实例代码
May 17 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
学习ExtJS table布局
2009/10/08 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
一篇不错的Python入门教程
2007/02/08 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
详解python的argpare和click模块小结
2019/03/31 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
python基于openpyxl生成excel文件
2020/12/23 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
教育学专业毕业生的自我评价
2013/11/21 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
校园演讲稿汇总
2014/05/21 职场文书
会计学毕业生求职信
2014/06/25 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server