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 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
js中eval详解
Mar 30 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 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
PHPAnalysis中文分词类详解
2014/06/13 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
jquery中radio checked问题
2015/03/16 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
简单谈谈python的反射机制
2016/06/28 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python通过链接抓取网站详解
2019/11/20 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
入党思想汇报怎么写
2014/04/03 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
优秀团队申报材料
2014/12/26 职场文书
初二学生评语大全
2014/12/26 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
社会实践单位意见
2015/06/05 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
React自定义hook的方法
2022/06/25 Javascript
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers