编程 Javascript

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

- Author -

代码家园

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

Javascript 相关文章推荐

最新优化收藏到网摘代码（digg，diigo）

Feb 07 Javascript

javascript 跨浏览器开发经验总结（五） js 事件

May 19 Javascript

JS常用正则表达式总结

Nov 12 Javascript

js实现网页倒计时、网站已运行时间功能的代码3例

Apr 14 Javascript

从JQuery源码分析JavaScript函数的apply方法与call方法

Sep 25 Javascript

动态加载js的方法汇总

Feb 13 Javascript

jQuery热气球动画半透明背景的后台登录界面代码分享

Aug 28 Javascript

AngularJS身份验证的方法

Feb 17 Javascript

vue实现提示保存后退出的方法

Mar 15 Javascript

vue实现文件上传读取及下载功能

Nov 17 Javascript

vue+Element中table表格实现可编辑（select下拉框）

May 21 Javascript

详解微信小程序动画Animation执行过程

Sep 23 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

PHP中读写文件实现代码

2011/10/20 PHP

PHP实现活动人选抽奖功能

2017/04/19 PHP

PHP实现负载均衡下的session共用功能

2018/04/17 PHP

PHP Web表单生成器案例分析

2020/06/02 PHP

javascript 写类方式之一

2009/07/05 Javascript

jQuery中将函数赋值给变量的调用方法

2012/03/23 Javascript

jQuery学习笔记之jQuery.fn.init()的参数分析

2014/06/09 Javascript

javascript学习笔记（七）Ajax和Http状态码

2014/10/08 Javascript

NodeJS中Buffer模块详解

2015/01/07 NodeJs

js控制多图左右滚动切换效果代码分享

2015/08/26 Javascript

最简单纯JavaScript实现Tab标签页切换的方式(推荐)

2016/07/25 Javascript

详解AngularJs ui-router 路由的简单介绍

2017/04/26 Javascript

基于JavaScript实现图片连播和联级菜单实例代码

2017/07/28 Javascript

BootStrap实现文件上传并带有进度条效果

2017/09/11 Javascript

javascript input输入框模糊提示功能的实现

2017/09/25 Javascript

JS 中使用Promise 实现红绿灯实例代码(demo)

2017/10/20 Javascript

详解vue+css3做交互特效的方法

2017/11/20 Javascript

如何基于原生javaScript生成带图片的二维码

2019/11/21 Javascript

vue 点击其他区域关闭自定义div操作

2020/07/17 Javascript

[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16

2019/08/18 DOTA

Python学习小技巧之列表项的拼接

2017/05/20 Python

numpy排序与集合运算用法示例

2017/12/15 Python

python中requests和https使用简单示例

2018/01/18 Python

用python写测试数据文件过程解析

2019/09/25 Python

浅谈CSS3中display属性的Flex布局的方法

2017/08/14 HTML / CSS

html2canvas生成清晰的图片实现打印的示例代码

2019/09/30 HTML / CSS

波兰多品牌运动商店：StreetStyle24.pl

2020/09/22 全球购物

Java中实现多态的机制是什么？

2014/12/07 面试题

高级护理专业大学生求职信

2013/10/24 职场文书

成龙洗发水广告词

2014/03/14 职场文书

创业女性典型材料

2014/05/02 职场文书

12.4法制宣传日标语

2014/10/08 职场文书

校园新闻广播稿5篇

2014/10/10 职场文书

2014年团支部年度工作总结

2014/12/24 职场文书

导游词之无锡华莱坞

2019/12/02 职场文书

在 Python 中利用 Pool 进行多线程

2022/04/24 Python