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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
JS继承 笔记
Jul 13 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
微信小程序动态添加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支持断点续传的源码
2010/05/16 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php 魔术方法详解
2014/11/11 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
快速了解Python相对导入
2018/01/12 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python如何绘制日历图和热力图
2020/08/07 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
幼儿园安全检查制度
2014/01/30 职场文书
绿色学校实施方案
2014/03/31 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
九年级英语教学反思
2016/02/15 职场文书