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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
angular多语言配置详解
May 16 Javascript
详解JavaScript修改注册表的方法
Jan 05 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读取XML值的代码(推荐)
2011/01/01 PHP
php curl的深入解析
2013/06/02 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
应届毕业生求职信
2013/11/30 职场文书
半年思想汇报
2013/12/30 职场文书
《猫》教学反思
2014/02/26 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
工作作风建设心得体会
2014/10/22 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android