编程 Javascript

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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

htm调用JS代码

Mar 15 Javascript

javascript 三种编解码方式

Feb 01 Javascript

JavaScript 嵌套函数指向this对象错误的解决方法

Mar 15 Javascript

javascript 用记忆函数快速计算递归函数

Mar 15 Javascript

jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

Jan 23 Javascript

图片上传插件jquery.uploadify详解

Nov 15 Javascript

jQuery插件Validate实现自定义表单验证

Jan 18 Javascript

JavaScript学习笔记之取数组中最大值和最小值

Mar 23 Javascript

实用jquery操作表单元素的简单代码

Jul 04 Javascript

javascript实现获取指定精度的上传文件的大小简单实例

Oct 25 Javascript

vue绑定设置属性的多种方式(5)

Aug 16 Javascript

layer设置maxWidth及maxHeight解决方案

Jul 26 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读取mssql的ntext字段返回值为空的解决方法

2014/12/30 PHP

laravel框架中路由设置，路由参数和路由命名实例分析

2019/11/23 PHP

LazyForm jQuery plugin 定制您的CheckBox Radio和Select

2009/10/24 Javascript

jQuery 联动日历实现代码

2012/05/31 Javascript

JavaScript实现的GBK、UTF8字符串实际长度计算函数

2014/08/27 Javascript

Javascript动态创建div的方法

2015/02/09 Javascript

jquery分析文本里url或邮件地址为真实链接的方法

2015/06/20 Javascript

javascript实现下班倒计时效果的方法(可桌面通知)

2015/07/10 Javascript

js实现iPhone界面风格的单选框和复选框按钮实例

2015/08/18 Javascript

基于jquery实现select选择框内容左右移动添加删除代码分享

2015/08/25 Javascript

jsonp跨域请求数据实现手机号码查询实例分析

2015/12/12 Javascript

jQuery easyui刷新当前tabs的方法

2016/09/23 Javascript

IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

2016/10/25 Javascript

基于Bootstrap框架实现图片切换

2017/03/10 Javascript

快速将Vue项目升级到webpack3的方法步骤

2017/09/14 Javascript

vue-cli3项目打包后自动化部署到服务器的方法

2020/09/16 Javascript

vue+elementUI中表格高亮或字体颜色改变操作

2020/11/02 Javascript

python中的一些类型转换函数小结

2013/02/10 Python

利用python批量给云主机配置安全组的方法教程

2017/06/21 Python

Python 2.7中文显示与处理方法

2018/07/16 Python

python实现flappy bird小游戏

2018/12/24 Python

PyQt5基本控件使用详解:单选按钮、复选框、下拉框

2019/08/05 Python

python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析

2019/10/14 Python

Python + selenium + crontab实现每日定时自动打卡功能

2020/03/31 Python

总结python 三种常见的内存泄漏场景

2020/11/20 Python

美国体育用品商店：Academy Sports + Outdoors

2020/01/04 全球购物

数据管理员的自我评价分享

2013/11/15 职场文书

装修五一活动策划案

2014/01/23 职场文书

应届生求职信范文

2014/05/26 职场文书

英语感谢信范文

2015/01/20 职场文书

岳庙导游词

2015/02/04 职场文书

社区文明创建工作总结2015

2015/04/21 职场文书

《一面五星红旗》教学反思

2016/02/23 职场文书

导游词之铁岭象牙山

2019/12/06 职场文书

python实现批量移动文件

2021/04/05 Python

table不让td文字溢出操作方法

2022/12/24 HTML / CSS