Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Image Slider Java

    Загружено:

    Yuliana Joe
    17 просмотров5 страниц
    The trick of this script is a very long (1800 pixels) and very thin (17 pixels) gif-image. By wiping this image back and forth over your pictures you get the illusion of a fade-in-fade-out-effect.

    Исходное описание:

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOC, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    The trick of this script is a very long (1800 pixels) and very thin (17 pixels) gif-image. By wiping this image back and forth over your pictures you get the illusion of a fade-in-fade-out-effect.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    17 просмотров5 страниц

    Image Slider Java

    Загружено:

    Yuliana Joe
    The trick of this script is a very long (1800 pixels) and very thin (17 pixels) gif-image. By wiping this image back and forth over your pictures you get the illusion of a fade-in-fade-out-effect.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 5

    <html>

    <head>
    <TITLE>ImageSlider 2.0: </TITLE>

    <meta NAME="keywords" CONTENT="Text, fade, DHTML, scroller, ticker,


    download, headline, marquee,animation, applet, JavaScript, dynamic">

    <meta NAME="description" CONTENT="Fourth generation image-slider-script.


    Great fade-in-fade-out-effect for your all your image-presentations,
    diashows etc. New: unique links for each image, simplified
    configuration, cross-browser.">

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Beginning of JavaScript -

    // CREDITS:
    // ImageSlider 2.0
    // Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
    // Permission given to use the script provided that this notice remains
    as is.
    // Additional scripts can be found at http://www.24fun.ch.
    // info@24fun.ch
    // 2/8/2000

    // IMPORTANT:
    // If you add this script to a script-library or script-archive
    // you have to add a link to http://www.24fun.ch on the webpage

    // CONFIGURATION:
    // The trick of this script is a very long (1800 pixels)
    // and very thin (17 pixels) gif-image. In this sample the gif-image is
    // called 'imgcover1800px.gif'.
    // This gif-image consists of two colors: black and white stripes.
    // The black strips are transparent.
    // By wiping this gif-image back and forth over your
    // pictures you get the illusion of a fade-in-fade-out-effect.
    // Try new effects by crating new gif-images!

    // And now let's install the whole thing step by step:


    // 1. Copy the script-block into the head-section of your HTML-file.
    // 2. Copy the div-blocks 'text' and 'cover' into the body-section of
    your HTML-file.
    // Do not forget the little script-block inside the div-
    block 'cover'!!!
    // 3. Copy the style-block into the head-section of your HTML-file.
    // 4. Copy the image-file 'imgcover1800px.gif' and put it into the
    // same directory as your HTML-file.
    // 5. Insert 'style="width:100%;overflow-x:hidden;overflow-y:scroll"
    onLoad="init()"'
    // right into the body-tag.
    // 6. Configure the variables below:

    // the name of the gif-image gliding over your pictures back and forth
    var coverimage="imgcover1800px.gif"

    // the width of the gif-image gliding over your pictures back and forth
    var coverimagewidth=1800
    // the height of the gif-image gliding over your pictures back and forth
    var coverimageheight=17

    // the name of the pictures you want to present


    var image = new Array()
    image[0]="<img src='imgslider123.gif'>"
    image[1]="<img src='imgslider223.jpg'>"
    image[2]="<img src='imgslider323.jpg'>"

    // the links for each picture


    var imageurl = new Array()
    imageurl[0]="http://www.24fun.ch"
    imageurl[1]="http://www.24fun.ch"
    imageurl[2]="http://www.24fun.ch"

    // this block will preload your pictures. No configuration required


    var imgpreload=new Array()
    for (i=0;i<=image.length-1;i++) {
    imgpreload[i]=new Image()
    imgpreload[i].src=image[i]
    }

    // the vertical position of your pictures


    var imagetop=10

    // the horizontal position of your pictures


    var imageleft=36

    // the height of your images (should be all the same)


    var imagewidth=240

    // the width of your images (should be all the same)


    var imageheight=120

    // influences the speed of the effect. A high value will speed it up


    var step=80

    // influences the speed of the effect. A high value will slow it down
    var speed=20

    // standstill (microseconds)
    var pause=1500

    // do not edit the values below this line


    var coverimagetop=imagetop
    var coverimageleft=imageleft
    var timer
    var i_image=0
    var i_cover=Math.ceil(imageheight/coverimageheight)
    var cliptop=0
    var clipleft=0
    var clipbottom=imageheight
    var clipright=imagewidth
    var clippoints
    var thisurl
    var firsttime=true
    function init() {
    if (document.all) {
    document.all.text.style.posTop=imagetop
    document.all.text.style.posLeft=imageleft
    document.all.cover.style.posTop=coverimagetop
    document.all.cover.style.posLeft=coverimageleft
    clipleft=0
    fadeout()
    }
    if (document.layers) {
    document.text.top=imagetop
    document.text.left=imageleft
    document.cover.top=coverimagetop
    document.cover.left=coverimageleft
    clipleft=0
    fadeout()
    }
    }

    function fadeout() {
    if (document.all) {
    if (document.all.cover.style.posLeft >=(-
    coverimagewidth+imagewidth+coverimageleft+step)) {
    clipleft+=step
    clipright=clipleft+imagewidth
    clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+"
    "+clipleft+")"
    document.all.cover.style.clip=clippoints
    document.all.cover.style.posLeft-=step
    timer= setTimeout("fadeout()",speed)
    }
    else {
    clearTimeout(timer)
    i_image++
    if (firsttime) {i_image--;firsttime=false}
    if (i_image>=image.length) {i_image=0}
    text.innerHTML=image[i_image]
    thisurl=imageurl[i_image]
    timer= setTimeout("fadein()",pause)
    }
    }
    if (document.layers) {
    if (document.cover.left >=(-
    coverimagewidth+imagewidth+coverimageleft+step-22)) {
    clipleft+=step
    clipright=clipleft+imagewidth
    document.cover.clip.top=cliptop
    document.cover.clip.left=clipleft
    document.cover.clip.bottom=clipbottom
    document.cover.clip.right=clipright
    document.cover.left-=step
    timer= setTimeout("fadeout()",speed)
    }
    else {
    clearTimeout(timer)
    i_image++
    if (firsttime) {i_image--;firsttime=false}
    if (i_image>=image.length) {i_image=0}
    document.text.document.write(image[i_image])
    document.text.document.close()
    thisurl=imageurl[i_image]
    timer= setTimeout("fadein()",pause)
    }
    }
    }

    function fadein() {
    if (document.layers) {
    if (document.cover.left<=coverimageleft) {
    clipleft-=step
    clipright=clipleft+imagewidth
    document.cover.clip.top=cliptop
    document.cover.clip.left=clipleft
    document.cover.clip.bottom=clipbottom
    document.cover.clip.right=clipright
    document.cover.left+=step
    timer= setTimeout("fadein()",speed)
    }
    else {
    clearTimeout(timer)
    timer= setTimeout("init()",pause)
    }
    }
    if (document.all) {
    if (document.all.cover.style.posLeft<=coverimageleft) {
    clipleft-=step
    clipright=clipleft+imagewidth
    clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+"
    "+clipleft+")"
    document.all.cover.style.clip=clippoints
    document.all.cover.style.posLeft+=step
    timer= setTimeout("fadein()",speed)
    }
    else {
    clearTimeout(timer)
    timer= setTimeout("init()",pause)
    }
    }
    }

    function gotourl() {
    document.location.href=thisurl
    }

    // - End of JavaScript - -->


    </SCRIPT>

    <style type="text/css">
    .imagestyle {
    position:absolute;
    left:-5000px;
    }
    </STYLE>
    </HEAD>
    <BODY bgcolor=FFFFFF style="width:100%;overflow-x:hidden;overflow-
    y:scroll" onLoad="init()">

    <DIV ID="text" class="imagestyle"></DIV>


    <DIV ID="cover" class="imagestyle">
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Beginning of JavaScript -
    document.write("<table cellpadding='0' border='0' cellspacing='0'>")
    for (i=1;i<=i_cover;i++) {
    document.write("<tr><td><a
    href='javascript:gotourl()'><img width='"+coverimagewidth+"'
    height='"+coverimageheight+"' src='"+coverimage+"'
    border=0></a></td></tr>")
    }
    document.write("</table>")
    document.close()
    // - End of JavaScript - -->
    </SCRIPT>
    </DIV>

    <DIV style="position:absolute;top:145px;left:10px;">
    <font size=1 face=Verdana><ul><b>ImageSlider 2.0: new fade-in-fade-out
    for your images</b>

    </DIV>

    </BODY>
    </HTML>

    Вам также может понравиться