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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
微信小程序实现随机验证码功能
Dec 20 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
js实现数字滚动特效
Dec 16 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
坏狼的PHP学习教程之第1天
2008/06/15 PHP
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php编程每天必学之表单验证
2016/03/01 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
javascript 闭包疑问
2010/12/30 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
vue实现搜索功能
2019/05/28 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
如何利用Python写个坦克大战
2020/11/18 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
Foreo国际站:Foreo International
2018/10/29 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
什么是封装
2013/03/26 面试题
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
2014年工会工作总结
2014/11/12 职场文书
消防演习通知
2015/04/25 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
商业计划书范文
2019/04/24 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android