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 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
开启BootStrap学习之旅
May 04 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
javascript实现前端分页效果
Jun 24 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 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
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
js数组去重的方法总结
2019/01/18 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python中pip的安装与使用教程
2018/08/10 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
物理教师自荐信范文
2013/12/28 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
关于迟到的检讨书
2014/01/26 职场文书
明信片寄语大全
2014/04/08 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
详解PyTorch模型保存与加载
2022/04/28 Python