JS+CSS实现淡入式焦点图片幻灯切换效果的方法


Posted in Javascript onFebruary 26, 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; 

 //切换按钮

 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 () {

   index++;

   index >= aImg.length && (index = 0);

   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/m01.jpg" width="320" height="240" /></li>

        <li><img src="/images/m02.jpg" width="320" height="240" /></li>

        <li><img src="/images/m03.jpg" width="320" height="240" /></li>

        <li><img src="/images/m04.jpg" width="320" height="240" /></li>

        <li><img src="/images/m05.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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 #Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 #Javascript
js使用post 方式打开新窗口
Feb 26 #Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 #Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 #Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 #Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 #Javascript
You might like
php的计数器程序
2006/10/09 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
JavaScript作用域链使用介绍
2013/08/29 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
python编写简单爬虫资料汇总
2016/03/22 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Django开发中的日志输出的方法
2018/07/02 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
财务主管岗位职责
2014/02/28 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年药房工作总结
2014/11/22 职场文书
新郎答谢词
2015/01/04 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
搞笑结婚保证书
2015/05/08 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
高三数学教学反思
2016/02/18 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
pandas数值排序的实现实例
2021/07/25 Python
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS