`
ice-cream
  • 浏览: 321497 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

很炫的图片循环效果

AIRJavaScriptSpringjQueryUP 
阅读更多

<!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 onclick="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 onclick="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 onclick="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>

分享到：
| 用条件注释为IE隔离CSS
评论
7 楼 ice-cream 2009-03-20  
yhjhoo 写道

图片高度好像不能调整啊

可以调整，img标签里width和height属性
6 楼 yhjhoo 2009-03-19  
图片高度好像不能调整啊
5 楼 Relucent 2009-03-19  
效果很不错
4 楼 ice-cream 2009-03-18  
duooluu 写道

楼主MM厉害啊，我想用一下能不能用呢？

当然可以，不过这个代码太多了，看看jquery写的吧，http://ice-cream.iteye.com/admin/blogs/325305，要简单很多
3 楼 duooluu 2009-03-18  
楼主MM厉害啊，我想用一下能不能用呢？
2 楼 tag13346 2009-02-09  
同意楼上意见
1 楼 javaeyename 2008-04-18  
我觉得你这个代码质量需要提高一下！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    图片3D循环滚动-很炫-很亮效果（源码）

    这是一款很炫的3D效果，图片循环滚动特效，可以用作程序所用，也可以自己玩，希望大家会喜欢!

    安卓图片轮播广告轮播自动滚屏相关-轻松实现广告头效果。支持无限循环各种炫酷翻页效果可以设置自动翻页和时间(而且非常智能手指触碰则暂停翻页.rar

    轻松实现广告头效果。支持无限循环，各种炫酷翻页效果， 可以设置自动翻页和时间(而且非常智能，手指触碰则暂停翻页.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。

    仿QQ空间背景图片动态循环滚动效果源码.zip

    仿QQ空间背景图片动态循环滚动效果源码，源码CloudImageView，该效果有点像3d的效果的，非常炫的滚动的效果的，打算做一个比较炫的背景循环的效果的朋友可以了解一下吧。   

    jQuery全屏背景图片无限循环缩放动画特效

    mkinfinite是一款效果非常酷的jQuery全屏背景图片无限循环缩放动画特效。这个背景图片插件可以允许你设置一组背景图片，然后插件会依次显示和缩放这组背景图片，效果非常的炫酷。

    精品 图片展示效果swf+xml 带fla源文件 网站首页

    很炫的图片展示动画，漂亮，精品 swf+xml 带fla源文件 做网站首页，产品展示都很适用

    仿QQ空间背景图片动态循环滚动效果

    仿QQ空间背景图片动态循环滚动效果源码，源码CloudImageView，该效果有点像3d的效果的，非常炫的滚动的效果的，打算做一个比较炫的背景循环的效果的朋友可以了解一下吧。

    无限循环卡片ViewPager

    前段时间做了一个关于商城的分享介绍卡片式ViewPager，效果看起来还是蛮炫丽的，整体有如下效果特点： 1、无限轮播 2、两种卡片布局（中间与两边的不同） 3、指示灯 4、滚动到下一个卡片会在Y轴进行偏移 5、可显示...

    推荐9款炫酷的基于jquery的页面特效

    imgscroll插件是一款支持图片焦点滚动（支持渐变和滚动），图片连续无缝循环滚动的js库，依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动。 在线演示 源码下载 3.jquery实现的fixed固定层时间轴动态效果 ...

    无限循环卡片ViewPager.zip

    前段时间做了一个关于商城的分享介绍卡片式ViewPager，效果看起来还是蛮炫丽的，整体有如下效果特点： 1、无限轮播 2、两种卡片布局（中间与两边的不同） 3、指示灯 4、滚动到下一个卡片会在Y轴进行偏移 5、可显示...

    Android代码-Android-ConvenientBanner

    用模拟器运行的效果，鼠标拨动和模拟器太卡等原因，实际效果比效果图更炫哦～～ demo代码请看戳这里 demo是用Module方式依赖，你也可以使用gradle 依赖: compile 'com.bigkoo:convenientbanner:2.0.5' Config in...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20.jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21.jquery定时自动切换banner...

    javaeye热点阅读

    3.1 偶的ExtJS讲座之基础教程PDF版3.2 很炫的图片循环效果(jquery改写版)3.3 CSS雕虫小技：八卦五行布图法介绍4. 软件开发和项目管理 4.1 面子驱动编程 4.2 创业公司的项目管理困境 ···············...

    乐秀视频编辑器

    ★ 新增多种转场效果(圈入圈出，时钟，百叶窗，溶解，淡入淡出，变小等多种炫酷效果) ★ 加入你喜爱的歌曲作为配乐。配乐也可以剪切哦。 ★ 视频拼接。不同格式的MP4都可以拼接哦 ★ 通过微信/优酷/QQ等分享

    二十三种设计模式【PDF版】

    之道 》,其中很多观点我看了很受启发,以前我也将"设计模式" 看成一个简单的解决方案,没有从一种高度来看待"设计模式"在软 件中地位,下面是我自己的一些想法: 建筑和软件某些地方是可以来比喻的 特别是中国传统建筑...

Magicbox
Global site tag (gtag.js) - Google Analytics