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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
Prototype String对象 学习
Jul 19 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
浅谈vue中.vue文件解析流程
Apr 24 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
跟我学Laravel之快速入门
2014/10/15 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
javascript标签在页面中的位置探讨
2013/04/11 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
js闭包学习心得总结
2018/04/17 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Django中几种重定向方法
2015/04/28 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
python super函数使用方法详解
2020/02/14 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
丑小鸭教学反思
2014/02/03 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
质量管理标语
2014/06/12 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js