JS幻灯片

最新推荐文章于 2023-07-20 09:29:22 发布
最新推荐文章于 2023-07-20 09:29:22 发布
阅读量404 收藏
点赞数
文章标签： function input button html image javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/charmjs/article/details/2159465
版权

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="huandengpian.ascx.cs" Inherits="huandengpian" %>
<body>
<!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=gb2312" />
<meta http-equiv="expires" content="0">
<title>JavaScript幻灯片效果</title>
<style type="text/css">
<!--
body { font-size:12px;
}
input {
    border-right: #7b9ebd 1px solid;
 padding-right: 2px;
 border-top: #7b9ebd 1px solid;
 padding-left: 2px;
 font-size: 12px;
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
 border-left: #7b9ebd 1px solid;
 cursor: hand;
 color: black;
 padding-top: 2px;
 border-bottom: #7b9ebd 1px solid;
}
.img {
 filter:alpha(opacity=1,enabled=1)  blendtrans(duration=1);
    border:1px solid #CCCCCC;
}
-->
</style>
<script language="javascript">
var l=0;
var sum=0;
var _c = 0;
var _i = 0;
var _v = 0;
var _l = 0;
var _fi = 0;
var _sf = 3000;
var _html = null;
var _image = null;
var _mycars= new Array();
var _w = new Array();
var _h = new Array();
var imgs=new Array();
var limg=new Array();

/* 渐隐渐现 */
function  transImg(enable){
 document.getElementById("showimg").filters.blendtrans.Apply();
 document.getElementById("showimg").filters[0].enabled=enable;
 document.getElementById("showimg").filters.blendtrans.Play();
}

/* 加载图片 */

function chk(){
  l--;
  document.getElementById("rotatorPlayer").innerHTML='<img src='+limg[0].src+'><br><br>' + '照片已加载：' + parseInt(((sum-

l)*100/sum)).toString() + '%'
  if (l==0){
      adRotator.play();
   document.getElementById('stops').disabled='';
   document.getElementById('next').disabled='';
  }
}

if (document.images){
  limg[0]=new Image();
  limg[0].src="loading.gif";
  for(var i=0;i<13;i++)
  {
    imgs[i]=new Image();
 imgs[i].src=parseInt(i+1)+".jpg";
  }
}

function adRotator() {}

function adRotator.add(p,w,h)
{
   _mycars[_c] = p;
   _w[_c] = w;
   _h[_c] = h;
   _c = _c + 1;
}

/* 播放设置 */
function  adRotator.loads()
{
   if (_i < _mycars.length && _l < 1)
   {
     _html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
     if (_v < 1)
     {
        document.getElementById('image').value = _html + ',' + _i;
        document.getElementById('rotatorPlayer').innerHTML = _html;
  transImg(0);
        _i = _i + 1;
  document.getElementById('backs').disabled='';
  transImg(1);
  transImg(0);
        window.setTimeout("adRotator.loads("+_i+")",_sf);
     }
   }
   else
   {
     _html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
  document.getElementById('image').value = _html + ',' + _i;
     document.getElementById('rotatorPlayer').innerHTML = _html;
  transImg(0);
  transImg(1);
  transImg(0);
   }
   if (_i+1 > _mycars.length)
   {
      document.getElementById('stops').disabled='True';
   document.getElementById('play').disabled='';
   document.getElementById('backs').disabled='';
   document.getElementById('next').disabled='True';
   _i = 0;
   _v = 1;
   }
}

/* 播放 */
function  adRotator.play()
{
   _v = 0;
   _l = 0;
   adRotator.loads();
}

/* 下一张 */
function adRotator.next()
{
   _l = 1;
   if(_i+1 < _mycars.length)
   {
      _i = _i + 1;
   document.getElementById('play').disabled='';
   document.getElementById('stops').disabled='True';
   document.getElementById('backs').disabled='';
   adRotator.loads();
   }
   else
   {
      document.getElementById('next').disabled='True';
   }
}

/* 上一张 */
function adRotator.backs()
{
   _l = 1;
   if(_i-1 < 0)
   {
      document.getElementById('backs').disabled='True';
   }
   else
   {
      _i = _i - 1;
   document.getElementById('play').disabled='';
   document.getElementById('stops').disabled='True';
   document.getElementById('next').disabled='';
   adRotator.loads();
   }
}

/* 间隔时间 */
function adRotator.set()
{
   var _sfc = document.getElementById('second').value;
   if (isInteger(_sfc))
   {
     _sf = _sfc * 1000;
   }
   else
   {
     alert('提示：只能输入数字！');
     document.getElementById('second').value=1;
     document.getElementById('second').select();
   }
}

/* 字符检测 */
function isInteger(str)
{ 
  var regu = /^[-]{0,1}[0-9]{1,}$/;
  return regu.test(str);
}

/* 暂停 */
function adRotator.stops()
{
   _v = 1;
}

/* 添加图片 */
for (var i=0;i<imgs.length;i++)
{
   adRotator.add(imgs[i].src,400,300);
}

</script>
</head>

<body style="text-align: left">
<table width="420" border="0" align="left"cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
<div id="rotatorPlayer" style="text-align:center"><img src="loading.gif"><br><br>照片已加载：0%</div>
<br><br>
<input type="button" name="play" value="开始播放" onClick="adRotator.play();this.disabled='true';document.getElementById

('stops').disabled=''" disabled="True"/>
<input type="button" name="stops" value="暂停" onClick="adRotator.stops();this.disabled='true';document.getElementById

('play').disabled=''" disabled="True"/>
<input type="button" name="backs" value="上一张" onClick="adRotator.backs();" disabled="True"/>
<input type="button" name="next" value="下一张" onClick="adRotator.next();" disabled="True"/>&nbsp;&nbsp;&nbsp;
<input type="text" id="second" value="3" size="3" maxlength="2">
秒
<input type="button" value="设置时间" onClick="adRotator.set()" />
<br><br>
<input name="image" type="text" size="65"/>
</td>
  </tr>
</table>
<script language="javascript">
sum=l=imgs.length;
for (var i=0;i<l;i++){
  imgs[i].οnlοad=chk;
  imgs[i].οnerrοr=chk;//无论图片是否加载成功，都执行指定方法
}
</script>
</body>
</html>

</body> 

charmjs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现简单幻灯片
liujian573281的博客
03-09 3824
如上图，JS实现简单幻灯片的原理解析：幻灯片按我的理解来说就是能够按顺序自动循环切换或者手动点击切换获得下标对应大图的特效。主要的方法就是：设置定时器，让大图每隔一段时间就切换一张，当切换到最后一张时进行判断，让下标回零重新循环切换。直接上代码解释吧。var timer=null; var now=0; //定义一个变量，为当前幻灯片的索引值//开启定时器，但一定记得开启之前先关闭所有定时器
Javascript实现幻灯片效果
illuSioN4ng↖(^ω^)↗
08-24 1088
Web上很多页面都有提供javascript幻灯效果的代码库，我们可以免费直接使用很多优秀的代码库。今天我开始学习用JavaScript实现幻灯效果，新手一步一步开始学起。 在创建一个幻灯效果的时候，页面的访客是我们需要首要考虑的因素。其中包括访问者的带宽、浏览器的类型、在下载大图片的时候是否需要漫长的下载时间。导航是第二个重要因素，访客是手动进行控制幻灯还是页面加载完成后自动播放，退出时自动停
JavaScript幻灯片特效实现技巧
最新发布
我点评的博客
07-20 578
Canvas是HTML5新增的一种元素，它提供了一种基于JavaScript的绘图API，可以用来实现复杂的图形和动画效果。通过Canvas，可以实现许多基于矢量图形的幻灯片特效，例如流光溢彩的背景、旋转缩放的元素等等。这段代码使用了WebGL的一个库three.js，通过定义一个物体的顶点和法向量，再经过投影变换和模型变换，最终实现了一个带有光照效果的旋转立方体。例如，要实现一个旋转的立方体，只需使用WebGL绘制立方体的六个面，并在每隔几毫秒的时间内改变相机的视角即可。
分享63个JS幻灯片代码，总有一款适合您
zy0412326的专栏
02-07 1094
js
JS 幻灯片代码(含自动播放)
剑来的博客
05-18 1704
前端
JavaScript实现幻灯片
mycsdn_first的博客
05-23 609
JavaScript实现幻灯片
原生JS实现幻灯片
12-10
效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type = "text/css"> *{ padding: 0; margin: 0; } ... height: 6
js 幻灯片的实现
10-28
今天在群里看到有人要幻灯片的代码，于是我自己也想了想，做个总结。常见的幻灯片切换无非就是轮播和渐变，不管哪种都是用定时器来逐步改变图片或者图片组的某种属性来实现的
js幻灯片特效代码
03-20
支持移动触摸设备js幻灯片
04-07
支持移动触摸设备js幻灯片是一款基于lory插件实现的简洁js图片切换代码。
js幻灯片轮播代码
11-25
js幻灯片轮播代码。 免费下载，供大家学习之用。 注意，这是用jQuery实现的，想学原生js的请再找找其他资料
JS实现幻灯片
12-05
函数式写法，非常利于新手学习,html5+css3+js实现效果
js图片幻灯片 jquery幻灯片图片 html幻灯片案例
11-15
js图片幻灯片 jquery幻灯片图片 html幻灯片案例，官方以及本人的案例各有一个
JS实现幻灯片效果
07-26
NULL 博文链接：https://eric-gao.iteye.com/blog/653235
html+js实现幻灯片
12-11
使用html和javaScript实现幻灯片轮流切换，可用于门户网站首页。
js幻灯片效果
09-16
不错的js幻灯片效果,经本人测试可以放心使用。高效便捷。
原生js实现幻灯片效果
vxx_xx的博客
08-07 672
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
分享99个JS幻灯片代码，总有一款适合您
zy0412326的专栏
02-07 1475
js幻灯片
js 幻灯片
weixin_34009794的博客
02-28 187
基本思路 红色：为可见区域 黑色方框：元素，不可见。 通过绝对定位方式，把黑色方框，移动到红色可见区别，来实现图片切换。 实例 创建幻灯实例对象 <div class="slide"> <div class="slide-inner"> <div class="item" style="backgroun...
自动轮播幻灯片源码 js
07-05
下面是一个基于JavaScript编写的自动轮播幻灯片的源码示例： HTML部分： ``` ``` CSS部分： ``` .slideshow-container { position: relative; } .slide { display: none; } .slide img { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值