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 相关文章推荐
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
实例详解Node.js 函数
Jun 10 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 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
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Js的MessageBox
2006/12/03 Javascript
javascript 写类方式之二
2009/07/05 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
如何编写jquery插件
2017/03/29 jQuery
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
django中间键重定向实例方法
2019/11/10 Python
大学生求职简历的自我评价
2013/10/14 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
通信研究生自荐信
2014/02/01 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
企业文化演讲稿
2014/05/20 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
2016新年慰问信范文
2015/03/25 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis