非常漂亮的JS+CSS图片幻灯切换特效


Posted in Javascript onNovember 20, 2013

非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦!

<!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>图片幻灯切换</title> 
<style type="text/css"> 
* { margin:0; padding:0; } 
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } 
h1, h2, h3, h4, h5, h6 { font-size:1em; } 
a { color:#0287CA; text-decoration:none; } 
a:hover { text-decoration:underline; } 
ul, li { list-style:none; } 
fieldset, img { border:none; } 
legend { display:none; } 
em, strong, cite, th { font-style:normal; font-weight:normal; } 
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; } 
table { border-collapse:collapse; } 
html { overflow:-moz-scrollbars-vertical; } 
#ibanner { position:relative; width:650px; height:250px; overflow:hidden; margin:20px 0 20px 300px; } 
#ibanner_pic {} 
#ibanner_pic a { position:absolute; top:0; display:block; width:650px; height:250px; overflow:hidden; } 
#ibanner_btn { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; } 
#ibanner_btn span { display:block; float:left; margin-left:4px; padding:0 5px; background:#000; cursor:pointer; } 
#ibanner_btn .normal { height:20px; margin-top:8px; border:1px solid #999; color:#999; font-size:16px; line-height:20px; } 
#ibanner_btn .current { height:28px; border:1px solid #FF5300; color:#FF5300; font-size:28px; line-height:28px; } 
</style> 
<script type="text/javascript"> 
function $(id) { return document.getElementById(id); } 
function addLoadEvent(func){ 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function(){ 
oldonload(); 
func(); 
} 
} 
} 
function addBtn() { 
if(!$('ibanner')||!$('ibanner_pic')) return; 
var picList = $('ibanner_pic').getElementsByTagName('a'); 
if(picList.length==0) return; 
var btnBox = document.createElement('div'); 
btnBox.setAttribute('id','ibanner_btn'); 
var SpanBox =''; 
for(var i=1; i<=picList.length; i++ ) { 
var spanList = '<span class="normal">'+i+'</span>'; 
SpanBox += spanList; 
} 
btnBox.innerHTML = SpanBox; 
$('ibanner').appendChild(btnBox); 
$('ibanner_btn').getElementsByTagName('span')[0].className = 'current'; 
for (var m=0; m<picList.length; m++){ 
var attributeValue = 'picLi_'+m 
picList[m].setAttribute('id',attributeValue); 
} 
} 
function moveElement(elementID,final_x,final_y,interval) { 
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) { 
moveing = false; 
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 classNormal() { 
var btnList = $('ibanner_btn').getElementsByTagName('span'); 
for (var i=0; i<btnList.length; i++){ 
btnList[i].className='normal'; 
} 
} 
function picZ() { 
var picList = $('ibanner_pic').getElementsByTagName('a'); 
for (var i=0; i<picList.length; i++){ 
picList[i].style.zIndex='1'; 
} 
} 
var autoKey = false; 
function iBanner() { 
if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')) return; 
$('ibanner').onmouseover = function(){autoKey = true}; 
$('ibanner').onmouseout = function(){autoKey = false}; var btnList = $('ibanner_btn').getElementsByTagName('span'); 
var picList = $('ibanner_pic').getElementsByTagName('a'); 
if (picList.length==1) return; 
picList[0].style.zIndex='2'; 
for (var m=0; m<btnList.length; m++){ 
btnList[m].onmouseover = function() { 
for(var n=0; n<btnList.length; n++) { 
if (btnList[n].className == 'current') { 
var currentNum = n; 
} 
} 
classNormal(); 
picZ(); 
this.className='current'; 
picList[currentNum].style.zIndex='2'; 
var z = this.childNodes[0].nodeValue-1; 
picList[z].style.zIndex='3'; 
if (currentNum!=z){ 
picList[z].style.left='650px'; 
moveElement('picLi_'+z,0,0,10); 
} 
} 
} 
} 
setInterval('autoBanner()', 5000); 
function autoBanner() { 
if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return; 
var btnList = $('ibanner_btn').getElementsByTagName('span'); 
var picList = $('ibanner_pic').getElementsByTagName('a'); 
if (picList.length==1) return; 
for(var i=0; i<btnList.length; i++) { 
if (btnList[i].className == 'current') { 
var currentNum = i; 
} 
} 
if (currentNum==(picList.length-1) ){ 
classNormal(); 
picZ(); 
btnList[0].className='current'; 
picList[currentNum].style.zIndex='2'; 
picList[0].style.zIndex='3'; 
picList[0].style.left='650px'; 
moveElement('picLi_0',0,0,10); 
} else { 
classNormal(); 
picZ(); 
var nextNum = currentNum+1; 
btnList[nextNum].className='current'; 
picList[currentNum].style.zIndex='2'; 
picList[nextNum].style.zIndex='3'; 
picList[nextNum].style.left='650px'; 
moveElement('picLi_'+nextNum,0,0,10); 
} 
} 
addLoadEvent(addBtn); 
addLoadEvent(iBanner); 
</script> 
</head> 
<body> 
<div id="ibanner"> 
<div id="ibanner_pic"> 
<a href="/jscss/"><img src="/jscss/demoimg/200904/a1.jpg" alt="" /></a> 
<a href="/sort/index.shtml"><img src="/jscss/demoimg/200904/a2.jpg" alt="" /></a> 
<a href="/other/lastupdate.shtml"><img src="/jscss/demoimg/200904/a3.jpg" alt="" /></a> 
<a href="/other/top100.shtml"><img src="/jscss/demoimg/200904/a4.jpg" alt="" /></a> 
</div> 
</div><!--ibanner end--> 
<div style="height:20px; background:#EEE;"></div> 
</body> 
</html>
Javascript 相关文章推荐
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
js实现京东轮播图效果
Jun 30 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 #Javascript
JS 去除Array中的null值示例代码
Nov 20 #Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 #Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 #Javascript
js数组转json并在后台对其解析具体实现
Nov 20 #Javascript
javascript 循环调用示例介绍
Nov 20 #Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 #Javascript
You might like
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
用python读写excel的方法
2014/11/18 Python
Python标准库之collections包的使用教程
2017/04/27 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Python无损压缩图片的示例代码
2020/08/06 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
中专毕业生自我鉴定
2013/11/21 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2015暑假假期总结
2015/07/13 职场文书
员工手册董事长致辞
2015/07/29 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS