`
ice-cream
  • 浏览: 329174 次
  • 性别: 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循环滚动-很炫-很亮效果（源码）"就是一种创新的展示技术，它利用3D特效来增强用户体验，使图片展示更加生动、吸引人。下面将详细介绍这个特效的实现原理和相关技术。 首先，我们要理解3D效果是如何在...

    Jquery超炫图片切换效果

    **jQuery超炫图片切换效果详解** 在Web开发中，动态且引人注目的图片展示是提升用户体验的关键元素之一。jQuery库以其简洁的API和强大的功能，成为实现这种效果的首选工具。本文将深入探讨如何利用jQuery创建一个...

    炫酷的循环翻页

    "炫酷的循环翻页"是Android应用中常见的一种动态效果，它通常用于展示一系列内容，如图片轮播、推荐列表等。这种效果通过结合ViewPager组件和自定义适配器实现，使得用户可以无限制地前后滑动页面，带来流畅且连贯的...

    超炫的js图片展示效果

    1. **轮播图**：轮播图是网页中最常见的图片展示方式之一，通过定时切换图片或响应用户点击事件来实现多张图片的循环展示。JavaScript可以轻松地控制图片的切换动画，如淡入淡出、左右滑动等。 2. **缩放和旋转效果...

    jQuery 图片切换（超炫效果）

    在网页设计中，图片切换效果是提升用户体验的重要手段之一，jQuery作为一个强大的JavaScript库，提供了丰富的功能来实现这种效果。本文将深入探讨如何使用jQuery创建超炫的图片切换效果。 首先，我们需要理解jQuery...

    很炫的图片跑马灯功能

    这个“很炫的图片跑马灯功能”是一个包含代码和样式的解决方案，它能让你的图片以循环滚动的方式呈现，营造出一种动态流动的效果。 在实现图片跑马灯功能时，通常会涉及到以下几个关键知识点： 1. **HTML 结构**：...

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

    本文将深入探讨如何实现一个具备自动滚屏、无限循环、炫酷翻页效果以及智能暂停功能的广告轮播器。 首先，我们需要了解Android中的ViewFlipper或者ViewPager这两个核心组件。ViewFlipper是一个方便的视图切换工具，...

    超炫的jquery图片上下滚动效果

    // 循环回到第一张图片 } } setInterval(scrollImages, 3000); // 每3秒滚动一次 }); ``` 以上代码将每3秒自动滚动一次图片，图片从底部向上移出视区，然后移到队列末尾重新出现，形成连续滚动的效果。 四、...

    超炫的js图片展示特效

    6. **动画库支持**：有很多优秀的JavaScript库，如jQuery、React、Vue等，提供了丰富的动画和过渡效果，可以帮助开发者快速实现复杂的图片展示特效。 7. **自定义事件**：JavaScript允许开发者自定义事件，比如当...

    自定义View实现炫酷跑马灯效果

    跑马灯效果本质上是通过改变View的布局参数，使内容看起来在视图区域内循环滚动。自定义View时，我们需要重写onDraw()方法，绘制文字或图片，同时通过定时器或者Handler更新View的位置。 2. 代码实现 创建一个继承...

    pb bmp图片左右滑屏的炫酷效果

    如果到达了最后一张图片，可以无缝地返回到第一张，实现循环滑动。 4. **处理边界条件**：当图片滑出屏幕边界时，需要进行适当的处理，比如切换到下一张图片或者重新开始。 5. **定时器与事件驱动**：可以使用...

    silverlight制作超炫超酷图片旋转动画效果的示例代码

    在本文中，我们将深入探讨如何使用Silverlight技术来创建一个超炫超酷的图片旋转动画效果。Silverlight是Microsoft推出的一种强大的RIA（Rich Internet Application）开发框架，它允许开发者创建丰富的交互式用户...

    多种js图片切换效果

    在JavaScript（简称JS）编程中，图片切换效果是一种常见的网页动态设计技术，它极大地提升了用户体验，使得静态的图片展示变得更加生动有趣。本篇文章将深入探讨几种常用的JS图片切换效果及其实现方法。 首先，我们...

    HTML5 canvas炫酷图片爆炸飞散特效

    3. **切片图片**：为了实现爆炸效果，我们需要将图片切割成多个小块。这可以通过在canvas上定义一个矩形网格，然后对每个网格内的像素进行复制到新的canvas或数组中。 4. **计算飞散方向**：每个切片在爆炸时应有...

    jQuery 图片切换（超炫效果）.zip

    这里，`switchImage`函数负责切换图片，`setInterval`则用来定时调用这个函数，实现自动循环。 此外，为了提供更好的用户体验，我们可能还需要添加一些额外功能，如鼠标悬停暂停、点击按钮手动切换等。这可以通过...

    js效果：CSS实现超级炫酷的流光按钮效果；在网页中实现文字的一个一个出现

    `infinite`关键字使得动画无限循环。 接下来，我们来谈谈如何在网页中实现文字逐个出现的效果。这主要通过JavaScript来完成。可以使用JavaScript的定时器（setTimeout或setInterval）配合DOM操作，将每个字符作为一...

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