非常漂亮的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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
Prototype Date对象 学习
Jul 12 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
JavaScript继承的三种方法实例
May 12 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里的JS打印函数
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP 第一节 php简介
2012/04/28 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP fclose函数用法总结
2019/02/15 PHP
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jquery 中ajax执行的优先级
2015/06/22 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python中from module import * 的一个坑
2014/07/20 Python
在Python中使用第三方模块的教程
2015/04/27 Python
python中的json总结
2018/10/11 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python dlib人脸识别代码实例
2019/04/04 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
计划生育标语
2014/06/23 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
道士塔读书笔记
2015/06/30 职场文书
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers