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 字符串连接性能优化
Dec 20 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
js如何获取网页所有图片
May 12 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
详解React路由传参方法汇总记录
Nov 29 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
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
javascript 日期常用的方法
2009/11/11 Javascript
jQuery入门知识简介
2010/03/04 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
javascript计时器详解
2015/02/28 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
python错误处理详解
2014/09/28 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python 处理string到hex脚本的方法
2018/10/26 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
创意活动策划书
2014/01/15 职场文书
工作决心书
2014/03/11 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang