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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
js特殊字符转义介绍
Nov 05 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
两款万能的php分页类
2015/11/12 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python类的继承用法示例
2019/01/31 Python
如何通过Python实现标签云算法
2019/07/02 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
运动会通讯稿50字
2014/01/30 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
家长会主持词开场白
2014/03/18 职场文书
绿色环保标语
2014/06/12 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
小学教师节活动总结
2015/03/20 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL