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或css文件后面跟参数的原因说明
Jan 09 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
ie focus bug 解决方法
2009/09/03 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
Vue实现验证码功能
2019/12/03 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python绘制规则网络图形实例
2019/12/09 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
租赁协议书范本
2014/04/22 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
杭白菊导游词
2015/02/10 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python