很炫的图片循环效果

最新推荐文章于 2020-12-12 11:51:51 发布
最新推荐文章于 2020-12-12 11:51:51 发布
阅读量198 收藏
点赞数
分类专栏： javascript 文章标签： AIR JavaScript Spring jQuery UP ViewUI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Strict.dtd">

<html lang="en">
<head>
<style>
<!--
body{ margin:1% 0 0 1%; font-family:Arial,Verdana,Helvetica,sans-serif;font-size:75%;}

img{ border:0; }

a:link, a:visited, a:active{ text-decoration:none;color:#0a84c1;font-size:1em;font-weight:bold; }

a:hover{ text-decoration:none;color:#f59000;font-size:1em;font-weight:bold; }

#hotel_display{ background:#fff; width:269px; padding:10px;}

.title_top{ background:url(http://www.iteye.com/upload/picture/pic/12025/b5e42408-d9d1-3c50-9cad-b719476e9c4d.gif?1208313629) no-repeat;padding:8px 0 8px 25px; }

.title_btm{ background:url(http://www.iteye.com/upload/picture/pic/12023/7f74e0a9-e25d-3a08-beb5-33179fd4f058.gif?1208313628) no-repeat;padding:8px 0 8px 25px;color:#f59000;font-weight:bold; }
-->
</style>
<script type="text/javascript">
<!--
var idxCurrentPromo = 0;
var blnRotation = false;
var numOpenPromoHeight = 190;
var numSlideFactor = .25;
var numRotationTime = 5000;

function initPromos() {
    switchPromos(idxCurrentPromo, blnRotation);
}

function QSinfo(link, strIDs, MoreQS) {
    var strHREF = "";

    if (strIDs && strIDs != "")    strHREF = strIDs;
   
    if (MoreQS && MoreQS != ""){
        strHREF = (strHREF!="")? strHREF + "&" + MoreQS : MoreQS;
    }
   
    if ((strHREF != "") && (link.href.indexOf(".") > 0)) {
        if (link.href.indexOf("?") < 0) link.href += "?" + strHREF;
           else link.href += "&" + strHREF;
    }
    return(0);
}numRotationTime

function checkTravelYear(vYear){
var intYear = parseInt("0" + String(vYear),10);
if(intYear < 100) {intYear += 2000;}
return(intYear);
}
function lpad(n, len, ch) {
var s = new String(n);
while (s.length < len) s = ch + s;
return s;
}

function switchPromosByProduct(productForm, keepRotating) {
    for (var i=0; i<promoCount; i++) {
        var strThisForm = "search_" + arrPromoProducts[i];
        if (productForm == strThisForm) {
            switchPromos(i, keepRotating);
            i=promoCount;
        }
    }
}

function switchPromos(promoNumber, keepRotating) {
    var endRotationHack = true;
    var idxOldPromo = idxCurrentPromo;
    idxCurrentPromo = new Number(promoNumber);
   
    if (blnRotation) {
        if (!keepRotating) {
            blnRotation = false;
        } else {
            var idxNextPromoR = (idxCurrentPromo + 1) % promoCount;
            setTimeout('switchPromos(' +idxNextPromoR + ',true)',numRotationTime);
        }
    } else {
        if (keepRotating) {
            endRotationHack = false;
        }
    }

    if(endRotationHack) {
        for (var i=0; i<promoCount; i++) {
            if (i == idxOldPromo) {
                document.getElementById("promo" +i+ "_on").style.height = "190px";
                document.getElementById("promo" +i+ "_on").style.display = "block";
                document.getElementById("promo" +i+ "_on_img").style.height = "190px";
                document.getElementById("promo" +i+ "_on_img").style.display = "block";
            } else {
                document.getElementById("promo" +i+ "_on").style.height = "0px";
                document.getElementById("promo" +i+ "_on").style.display = "none";
                document.getElementById("promo" +i+ "_on_img").style.height = "0px";
                document.getElementById("promo" +i+ "_on_img").style.display = "none";
            }
            if (i == idxCurrentPromo) {
                document.getElementById("promo" +i).style.display = "none";
                document.getElementById("promo" +i + "_exp").style.display = "block";
            } else {
                document.getElementById("promo" +i).style.display = "block";
                document.getElementById("promo" +i + "_exp").style.display = "none";
            }
        }
       
        if (parseInt(idxCurrentPromo) != parseInt(idxOldPromo)) {
            animatePromos(idxOldPromo, idxCurrentPromo);
        }
    }
}

function animatePromos(numOldPromo, numNewPromo) {
    var objNewPromoOpen = document.getElementById("promo" + numNewPromo.toString() + "_on");
    var objNewPromoOpenImg = document.getElementById("promo" + numNewPromo.toString() + "_on_img");
    objNewPromoOpen.style.display = "block";
    objNewPromoOpenImg.style.display = "block";

    startPromoAnimation = setInterval("playAccordian(" +numOldPromo +"," +numNewPromo + ")",5);
}

function playAccordian(numOldPromo, numNewPromo) {
    var objOldPromoOpen = document.getElementById("promo" + numOldPromo.toString() + "_on");
    var objOldPromoOpenImg = document.getElementById("promo" + numOldPromo.toString() + "_on_img");
    var objNewPromoOpen = document.getElementById("promo" + numNewPromo.toString() + "_on");
    var objNewPromoOpenImg = document.getElementById("promo" + numNewPromo.toString() + "_on_img");
   
    if ((parseInt(objOldPromoOpen.style.height) > 3) && (parseInt(objOldPromoOpenImg.style.height) > 3) && (parseInt(objNewPromoOpen.style.height) < numOpenPromoHeight-2) && (parseInt(objNewPromoOpenImg.style.height) < numOpenPromoHeight-2)) {
        objOldPromoOpen.style.height = (parseInt(objOldPromoOpen.style.height) - parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
        objOldPromoOpenImg.style.height = (parseInt(objOldPromoOpenImg.style.height) - parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
        objNewPromoOpen.style.height = (parseInt(objNewPromoOpen.style.height) + parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
        objNewPromoOpenImg.style.height = (parseInt(objNewPromoOpenImg.style.height) + parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
    } else {
        objOldPromoOpen.style.height = "0px";
        objOldPromoOpen.style.display = "none";
        objOldPromoOpenImg.style.height = "0px";
        objOldPromoOpenImg.style.display = "none";
        objNewPromoOpen.style.height = numOpenPromoHeight+"px";
        objNewPromoOpenImg.style.height = numOpenPromoHeight+"px";
        clearInterval(startPromoAnimation);
    }
}
-->
</script>
</head>
<body style="background:#a5a5a5;">
<script language="JavaScript" type="text/javascript">
<!--
blnRotation = true;
promoCount = 3;
var arrPromoProducts = ["htl","air","vac"];
-->
</script>
<div id="hotel_display">
    <div style="display: none;" id="promo0" class="title_top"><a href="javascript:switchPromos(0, false);">hotels - up to half off</a></div>
    <div style="display: block;" id="promo0_exp" class="title_btm"><span>hotels - up to half off</span></div>
    <div style="height: 190px; display: block;" id="promo0_on" class="openpromo">
        <a οnclick="switchPromos(0, false);QSinfo(this, 'irefid=HPDEALS1&irefclickid=nyop_hotels');" href="#"><img style="height: 190px; display: block;" id="promo0_on_img" src="images/img1.jpg" alt="title1" height="190" width="267"></a>
    </div>

    <div style="display: block;" id="promo1" class="title_top"><a href="javascript:switchPromos(1, false);">spring deals on air + car</a></div>
    <div style="display: none;" id="promo1_exp" class="title_btm"><span>spring deals on air + car</span></div>
    <div style="height: 0px; display: none;" id="promo1_on" class="openpromo">
        <a οnclick="switchPromos(1, false);QSinfo(this, 'irefid=HPDEALS2&irefclickid=air+car_spring');" href="#"><img style="height: 0px; display: none;" id="promo1_on_img" src="images/img2.jpg" alt="title2" height="190" width="267"></a>
    </div>

    <div style="display: block;" id="promo2" class="title_top"><a href="javascript:switchPromos(2, false);">save up to $150 instantly</a></div>
    <div style="display: none;" id="promo2_exp" class="title_btm"><span>save up to $150 instantly</span></div>
    <div style="height: 0px; display: none;" id="promo2_on" class="openpromo">
        <a οnclick="switchPromos(2, false);QSinfo(this, 'irefid=HPDEALS3&irefclickid=oneweek_vpsale');" href="#"><img style="height: 0px; display: none;" id="promo2_on_img" src="images/img3.jpg" alt="title3" height="190" width="267"></a>
    </div>
</div>
<script type="text/javascript" language="JavaScript">
<!--
    initPromos();
// -->
</script>
</body>
</html>

iteye_21028
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android自定义图片过渡效果,教你做出炫酷的Android动画效果
weixin_39856589的博客
05-25 872
前言Android动画也是Android系统中一个很重要的模块, 在平时开发中, 为了做出炫酷的效果, 动画可以说是必不可少的; 本文将总结Android中与动画相关的部分, 文中部分内容整理自文末参考链接, 权作笔记~需要声明的是文章不会详细通过源码去讲解各种动画的实现细节, 因为相对来说, 动画的熟练使用更为重要, 所以本文只是提一下关键的动画源码部分正文一. 概述Android中动画分为三大...
一个很炫的图片/相册浏览控件（Flex实现）
weixin_34399060的博客
02-11 122
有段时间为了做个事情，需求大概这样：有几组照片集（或者叫相册）需要在软件中就行快速浏览，效果类似于Windows操作系统中的照片查看器，既可以缩略图看，也可以逐个放大看，也可以幻灯片形式放映。要求WinForm程序中实现并集成。 初看逐个问题很简单嘛，找个现成图片浏览控件，或者干脆自己写一个也行。没想到一圈照下来，还真就没找到一个合适的WinForm的.NET控件能实现如此需求。 最后无意中发...
很炫的图片循环效果(jquery改写版)
ice-cream
02-08 99
以前我在博客中发表过这个图片循环效果，是用javascript写的 http://ice-cream.iteye.com/admin/blogs/183237 最近在研究jquery，就用jquery改写了一下，发现代码要简单很多 jquery代码： $(document).ready(function(){ $("img:not(:first)").hide(); $("span:fi...
图片3D循环滚动-很炫-很亮效果（源码）
05-22
这是一款很炫的3D效果，图片循环滚动特效，可以用作程序所用，也可以自己玩，希望大家会喜欢!
产生无限循环的图片移动效果
08-15
提供一张图片，可以在水平或者垂直方向产生无限循环的图片移动效果
wpf中图片滚动效果demo_这交互炸了:在RecyclerView中实现炫酷大图视差效果
weixin_39620629的博客
12-12 523
本文作者作者：wangsj1992链接：https://www.jianshu.com/p/9faba2e2975b本文由作者授权发布。1前言github地址：https://github.com/giswangsj/RvParallaxImageView 在知乎app上看到过类似如下的效果：在recyclerview中，某一个item位置显示广告图片，广告图是可以填充屏幕的大图，re...
超炫的js图片展示效果
06-07
1. **图片轮播效果**：JavaScript可以轻松创建图片轮播组件，让多张图片在页面上循环播放，用户可以通过按钮或自动定时器控制切换。这种效果通常通过改变图片的CSS属性（如`display`或`opacity`）或使用HTML5的`...
很炫的现实图片效果
kiss1988318的博客
01-20 97
先看看效果！！ [img]http://dl.iteye.com/upload/attachment/196144/ec030a6a-e00d-391e-b71f-ddb6ebc4606c.jpg[/img] 然后再送上网址，该网址有源码下载： [url]http://demo.quietlyscheming.com/fisheye/index.html[/url]...
图片滚动源码
橙序员凡星
02-28 838
图片滚动代码： 图片滚动 <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 100%; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 {
鼠标经过图片，显示替换/遮盖层
iuukai
02-02 955
下面附上源码和图片下载地址 ????????????图片地址：火影忍者超酷系列壁纸放送1080P高清壁纸 （由于本地图片不显示，所以我换上了网址链接） 下面代码直接复制粘贴即可看效果。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>鼠标经过图片出现遮盖层</ti...
Android学习之分享一款很炫的图片选择器ImageSelector
隔壁小王的博客
03-28 9418
今天有个朋友在导入库时，as有点问题，然后我让他把库发给我，下载下来一看，还不错，就跟大家分享一下这个库包含：单选，多选，是否显示拍照，是否预览，是否剪切等一系列功能，而且看了库之后，感觉使用也超级简单，喜不自胜，先给大家上图吧。实现多选，并且带有拍照选择相册图片预览裁剪功能这个库功能还是很全的，界面也比较精美，下面看怎么使用吧这是依赖库的结构，集成到项目中只要添加这个library到modual中
循环展示图片(画中画效果)
羽筠的博客
07-06 3347
循环展示图片(画中画效果)，页面展示效果就是每次显示两张叠加起来的图片，上面的一张图在下面的图的里面，画面不断的缩小，当下面的一张图缩放到窗口大小时它自己切换成上面的图片，叠加在另一张新加载的图片（下面的图）的上面 最先设计的一版是用JS定时器不断控制HTML中两张图片的大小、定位信息的，为了使其看上去有不间断的变化效果，加上了CSS3过渡的效果，此功能实现的所有HTML/CSS/JS都直接
你不曾见过的酷炫地图可视化作品（二）
weixin_34128839的博客
11-15 940
猜谜猜谜啦！你一定猜不出最后一张图是什么！一、前言本文是《你不曾见过的酷炫地图可视化作品（一）》的系列文章，上回整理了诸如：世界顶级学者全球迁移图、百度春运迁徙图、中国人口分布图、中美博物馆分布情况图、移民图、NASA全球夜间灯光地图、摩拜单车出行轨迹图、北京早晚高峰通勤图等作品。本回继续介绍一些有趣的地图可视化作品。二、作品2.1 全球音乐地图全球音乐地图：Musical Map of the...
048N06L-VB TO252一款N-Channel沟道TO252的MOSFET晶体管参数介绍与应用说明
07-08
048N06L-VB TO252；Package：TO252；Configuration：Single-N-Channel；VDS：60V；VGS：20（±V）；Vth：3V；RDS(ON)=12mΩ@VGS=4.5V；RDS(ON)=4.5mΩ@VGS=10V；ID：97A；Technology：Trench；
基于阵列响应向量估计的宽容体积阵波束形成-洪常委.pdf
最新发布
07-08
基于阵列响应向量估计的宽容体积阵波束形成-洪常委.pdf
nginx部署教程，介绍文档nginx部署教程，介绍文档
07-08
部署 Nginx（发音为"engine-x"）是一种流行的 Web 服务器和反向代理服务器，它可以处理静态内容、负载均衡、HTTP缓存以及作为反向代理来优化和加速网站。以下是一个简单的 Nginx 部署教程，适用于基本的安装和配置： ### 1. 安装 Nginx #### 在 Ubuntu 上安装 ```bash sudo apt update sudo apt install nginx ``` #### 在 CentOS/RHEL 上安装 ```bash sudo yum install epel-release sudo yum install nginx ``` ### 2. 启动和管理 Nginx 服务 安装完成后，可以使用以下命令来启动、停止和重新加载 Nginx： - 启动 Nginx 服务： ```bash sudo systemctl start nginx ``` - 停止 Nginx 服务： ```bash sudo systemctl stop nginx ``` - 重新加载 Nginx 配置（不中断现有连接）： ```bash s
python实现深度学习模型.docx
07-07
使用 TensorFlow 或 PyTorch 实现深度学习模型是当前在人工智能领域中非常流行的应用之一。这两个框架都提供了丰富的工具和接口，使得开发者可以轻松地构建、训练和部署各种类型的深度学习模型。下面我将分别介绍 TensorFlow 和 PyTorch 在实现深度学习模型方面的一些常见用法和案例： TensorFlow TensorFlow 是由 Google 开发的开源深度学习框架，具有以下特点： 静态计算图和动态计算图：TensorFlow 1.x 使用静态计算图，而 TensorFlow 2.x 默认使用动态计算图（Eager Execution），更加易于使用和调试。
javascript实现图片循环滚动效果
05-27
可以使用以下代码实现图片循环滚动效果： HTML代码： ```html ``` CSS代码： ```css .slider { overflow: hidden; } .slider-container { display: flex; width: 400%; animation: slide 10s...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值