非常漂亮的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 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
JavaScript中的new的使用方法与注意事项
May 16 Javascript
DWR Ext 加载数据
Mar 22 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
php 生成随机验证码图片代码
2010/02/08 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
简明json介绍
2008/09/28 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python解析xml文件操作实例
2014/10/05 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Windows下python3.7安装教程
2018/07/31 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
小区停车场管理制度
2014/01/27 职场文书
初中军训感想300字
2014/03/05 职场文书
房屋租赁协议书
2014/04/10 职场文书
财产公证书
2014/04/10 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
颐和园的导游词
2015/01/30 职场文书
应聘教师求职信范文
2015/03/20 职场文书
学生犯错保证书
2015/05/09 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers