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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jQuery简单实现日历的方法
May 04 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
浅谈JavaScript 声明提升
Sep 14 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 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连接Oracle数据库
2006/10/09 PHP
用文本文件制作留言板提示(上)
2006/10/09 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
jsTree使用记录实例
2016/12/01 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 实现在txt指定行追加文本的方法
2018/04/29 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
工程师岗位职责
2013/11/08 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
优秀家长事迹材料
2014/05/17 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
慰问信格式规范
2015/03/23 职场文书
新闻报道稿范文
2015/07/23 职场文书