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


Posted in Javascript onMarch 02, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
js中的闭包学习心得
Feb 06 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 #Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 #Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 #Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 #Javascript
js实现在网页上简单显示时间的方法
Mar 02 #Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 #Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 #Javascript
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
php生成html文件方法总结
2014/12/01 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
python实现在目录中查找指定文件的方法
2014/11/11 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python hough变换检测直线的实现方法
2019/07/12 Python
写自荐信的七个技巧
2013/10/15 职场文书
大学生心理活动总结
2014/07/04 职场文书
化学工程专业求职信
2014/08/10 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
责任书范本大全
2015/05/11 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫