非常漂亮的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 键盘事件的几个基本方法
Oct 30 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jquery中radio checked问题
Mar 16 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
vue 清空input标签 中file的值操作
Jul 21 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
linux下编译安装memcached服务
2014/08/03 PHP
重新认识php array_merge函数
2014/08/31 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php服务器的系统详解
2019/10/12 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python列表计数及插入实例
2014/12/17 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
django缓存配置的几种方法详解
2018/07/16 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
python 实现客户端与服务端的通信
2020/12/23 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
企业行政文员岗位职责
2013/12/03 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
租赁协议书范本
2014/04/22 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书