JS实现可切换图片的幻灯切换效果示例


Posted in Javascript onMay 24, 2019

本文实例讲述了JS实现可切换图片的幻灯切换效果。分享给大家供大家参考,具体如下:

<!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切换图片幻灯切换效果</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="img/3.jpg" width="320" height="240"/></li>
    <li><img src="img/1.jpg" width="320" height="240"/></li>
    <li><img src="img/2.jpg" width="320" height="240"/></li>
    <li><img src="img/3.jpg" width="320" height="240"/></li>
    <li><img src="img/4.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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
微信小程序动态添加view组件的实例代码
May 23 #Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 #Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 #Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 #Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 #Javascript
微信小程序开发实现消息推送
Nov 18 #Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
You might like
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
Vue异步加载about组件
2017/10/31 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
python函数的5种参数详解
2017/02/24 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
总经理职责
2013/12/22 职场文书
火锅店营销方案
2014/02/26 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
大学生十八大感想
2015/08/11 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
python开发制作好看的时钟效果
2022/05/02 Python