JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

本文实例讲述了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法。分享给大家供大家参考。具体实现方法如下:

代码如下:

<!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>JS+CSS自动改变切换方向的图片幻灯切换效果</title>
<style>
body,div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{background:#000;text-align:center;font:12px/20px Arial;}
#box{position:relative;width:322px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}
#box .list{position:relative;width:320px;height:240px;overflow:hidden;border:1px solid #ccc;}
#box .list li{position:absolute;top:0;left:0;width:320px;height:240px;opacity:0;filter:alpha(opacity=0);}
#box .list li.current{opacity:1;filter:alpha(opacity=100);}
#box .count{position:absolute;right:0;bottom:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
#tmp{width:100px;height:100px;background:red;position:absolute;}
</style>
<script type="text/javascript">
window.onload = function ()
{
 var oBox = document.getElementById("box");
 var aUl = document.getElementsByTagName("ul");
 var aImg = aUl[0].getElementsByTagName("li");
 var aNum = aUl[1].getElementsByTagName("li");
 var timer = play = null;
 var i = index = 0;
 var bOrder = true;
 //切换按钮
 for (i = 0; i < aNum.length; i++)
 {
  aNum[i].index = i;
  aNum[i].onmouseover = function ()
  {
   show(this.index)
  }
 }
 //鼠标划过关闭定时器
 oBox.onmouseover = function ()
 {
  clearInterval(play)
 };
 //鼠标离开启动自动播放
 oBox.onmouseout = function ()
 {
  autoPlay()
 };
 //自动播放函数
 function autoPlay ()
 {
  play = setInterval(function () {
   //判断播放顺序
   bOrder ? index++ : index--;  
   //正序
   index >= aImg.length && (index = aImg.length - 2, bOrder = false);
   //倒序
   index <= 0 && (index = 0, bOrder = true);
   //调用函数
   show(index)
  },2000);
 }
 autoPlay();//应用
 function show (a)
 {
  index = a;
  var alpha = 0;
  for (i = 0; i < aNum.length; i++)aNum[i].className = "";
  aNum[index].className = "current";
  clearInterval(timer);  
  for (i = 0; i < aImg.length; i++)
  {
   aImg[i].style.opacity = 0;
   aImg[i].style.filter = "alpha(opacity=0)";
  }
  timer = setInterval(function () {
   alpha += 2;
   alpha > 100 && (alpha =100);
   aImg[index].style.opacity = alpha / 100;
   aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
   alpha == 100 && clearInterval(timer)
  },20);
 }
};
</script>
</head>
<body>
<div id="box">
    <ul class="list">
        <li class="current"><img src="/images/m06.jpg" width="320" height="240" /></li>
        <li><img src="/images/m07.jpg" width="320" height="240" /></li>
        <li><img src="/images/m08.jpg" width="320" height="240" /></li>
        <li><img src="/images/m09.jpg" width="320" height="240" /></li>
        <li><img src="/images/m10.jpg" width="320" height="240" /></li>
    </ul>
    <ul class="count">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2015-02-27

js实现同一页面可多次调用的图片幻灯切换效果

本文实例讲述了js实现同一页面可多次调用的图片幻灯切换效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/x

JS实现的文字与图片定时切换效果代码

本文实例讲述了JS实现的文字与图片定时切换效果代码.分享给大家供大家参考.具体如下: 这是近来门户们都喜欢用的特效,左侧是一个大图片,右侧是对应文字,鼠标移动时,对应行的文字会变化,图片也相应的切换,如果没有鼠标动作时,它会自己播放,播放时间可调整,个人感觉挺不错的导航效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-txt-pic-time-cha-tab-codes/ 具体代码如下: <head> <meta http-e

js支持键盘控制的左右切换立体式图片轮播效果代码分享

本文实例讲述了js支持键盘控制的左右切换立体式图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现支持键盘控制的左右切换立体式图片轮播效果,特别有立体感,最重要的一点是可以利用键盘进行控制. 特性介绍:      1.轻松的改变幻灯变的宽度.      2.轻易改变下一张展示图片的数量.      3.最后一张图片会循环回到第一张图片里.      4.嵌入了Fancy查看插件,在每张图片上都能查看详细图片信息. 运行效果图:                   

js实现图片和链接文字同步切换特效的方法

本文实例讲述了js实现图片和链接文字同步切换特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js图片和链接文字同步切换特效</title> <head> <script language=JavaScript> var imgUrl=new Array(); var imgLink=new Array(); var imgTz=new Array(); var adNum=0; imgUrl

js实现使用鼠标拖拽切换图片的方法

本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

JS溶解形式的文字切换特效

JS溶解形式的文字切换特效 messages = new Array() messages[0] = "我们,都知道吧?" messages[1] = "我们更关注开源,欢迎发布开源源代码" messages[2] = "提供给你一个有质量的源代码资料站" mescolor = new Array() mescolor[0] = "000000" mescolor[1] = "FF0000" mescolo

JS、CSS文字切换,定时交替,代码精简

你可以把它看作像写一般的CSS列表一样,只用增加两三行代码就能完成切换效果. 文本定时变动代码 #newslist{ background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:288px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:288px;height:20px;margin:0px;

JS实现FLASH幻灯片图片切换效果的方法

本文实例讲述了JS实现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/xh

JS实现自动切换文字的导航效果代码

本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制按钮,点击左侧则向上切换菜单文字,点击右侧则切换到一个菜单项内容,也可自动切换,鼠标不点击的时候菜单会自动变化文字. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-font-nav-style-codes/ 具体代码如下:

js+div实现文字滚动和图片切换效果代码

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

JS+DIV+CSS实现的经典标签切换效果代码

本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

js带前后翻页的图片切换效果代码分享

本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu

js鼠标点击图片切换效果代码分享

本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

jquery的幻灯片图片切换效果代码分享

本文实例讲述了jquery的幻灯片图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <LINK rel=stylesheet type=text/css href="css/lrtk.css&quo

jquery实现LED广告牌旋转系统图片切换效果代码分享

本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果. LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现LED广告牌旋转

纯js无flash仿搜狐女人频道FLASH图片切换效果代码

前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: [加载图片慢点请等会] www.jb51.net 我们 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relativ

纯js实现背景图片切换效果代码

html代码 复制代码 代码如下: <!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> <title>背景切

css图片切换效果代码[不用js]

纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd

jquery+css实现动感的图片切换效果

本文实例讲述了jquery+css实现动感的图片切换效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 基本思路:定义一个数组存放需要展示的图片,接着当单击图片时删除zoomIn类,添加fadeOutRight类,实现实图右移并消失,记数器加1(用于调用下一张图片),当图片删除500毫秒后判断图片是不是最后一张,如果是,就把记数器调为0,从第一张图片开始,删除图片代码,接着创建一张新的图片代码,并把src设为下一张图片,同时加上缩放动画样式类animated zoom