Şimdi Ara

Efektli Resim Galerisi (slideshow değil)

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
2 Misafir (1 Mobil) - 1 Masaüstü1 Mobil
5 sn
4
Cevap
0
Favori
757
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • Aşağıdaki gibi kod'um var. Benim istediğim bu resim galerisi koduna fade efekti eklemek. Yani ileri dediğim zaman fade efekti uygulanıp bir sonraki resime gitsin. Yardımcı olabilen arkadaşlara duyurulur. (milliyet.com.tr ana sayfasında buna benzer var)

    <!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=iso-8859-9" />
    <title>Resim Slayt</title>
    <body>
    <div align="center">
    <center>
    <table border="0" cellpadding="0">
    <tr>
    <td width="100%"><center><img src="images/a/Slide1.JPG" width="750" height="563" name="photoslider"></td>
    </tr>
    <tr>
    <td width="100%"><form method="POST" name="rotater">
    <div align="center"><center><p><script language="JavaScript1.1">
    var photos=new Array()
    var which=0

    /*Aşağıdaki kısımdan imajları değiştirebilir, yeni imajlar ekleyebilirsiniz*/
    photos[0]="images/a/slide1.jpg"
    photos[1]="images/a/slide2.jpg"
    photos[2]="images/a/slide3.jpg"
    photos[3]="images/a/slide4.jpg"
    photos[4]="images/a/slide5.jpg"

    function backward(){
    if (which>0){
    window.status=''
    which--
    document.images.photoslider.src=photos[which]
    }
    }
    function forward(){
    if (which<photos.length-1){
    which++
    document.images.photoslider.src=photos[which]
    }
    else window.status='Galeri Sonu'
    }
    </script><input type="button" value="<<Geri" name="B2"
    onClick="backward()"> <input type="button" value="İleri>>" name="B1"
    onClick="forward()"><br>
    <a href="#" onClick="which=1;backward();return false"><small>Başa Dön
    </small></a></p>
    </center></div>
    </form>
    </td>
    </tr>
    </table>
    </center>
    </div>
    </head>
    </body>
    </html>







  • http://simplejs.bleebot.com/en.html sayfasında bir örnek var.
  • quote:

    Orjinalden alıntı: snoppy

    http://simplejs.bleebot.com/en.html sayfasında bir örnek var.


    Çok teşekkürler. İnceleyeceğim.
  • Yabancı bir siteden aşağıdaki kodu bulup değiştirdim. Ve başarıyla oldu.

    <html> 
    <head>
    <title>Proje</title>

    <!--
    Set up the caption font in the following style.
    Also set the styles for the controls.
    Place the style script in the head of the page.
    //-->

    <style>
    .Caption {
    font-family: Arial;
    font-weight: normal;
    font-size: 12pt;
    color: #FF3300; }

    A.Controls:link { color:#666666;
    text-decoration:none;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold; }
    A.Controls:visited { color:#666666; text-decoration:none;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold; }
    A.Controls:active { color:#666666; text-decoration:none;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold; }
    A.Controls:hover { color:#00FF00; text-decoration:none;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bold; }

    </style>

    <!--
    Place the following script in the head of the page.
    Follow the set-up instructions within the script.
    //-->

    <script>

    // (C) 2003 by CodeLifter.com
    // Free for all users, but leave in this header.

    // ==============================
    // Set the following variables...
    // ==============================

    // Set the slideshow speed (in milliseconds)
    var SlideShowSpeed = 3000;

    // Set the duration of crossfade (in seconds)
    var CrossFadeDuration = 2;

    var Picture = new Array(); // don't change this
    var Caption = new Array(); // don't change this
    var showHot = false; // don't change this

    // Specify the image files...
    // To add more images, just continue
    // the pattern, adding to the array below.
    // To use fewer images, remove lines
    // starting at the end of the Picture array.
    // Caution: The number of Pictures *must*
    // equal the number of Captions!

    Picture[1] = 'images/01.JPG';
    Picture[2] = 'images/02.JPG';
    Picture[3] = 'images/03.JPG';
    Picture[4] = 'images/04.JPG';
    Picture[5] = 'images/05.JPG';



    // Specify the Captions...
    // To add more captions, just continue
    // the pattern, adding to the array below.
    // To use fewer captions, remove lines
    // starting at the end of the Caption array.
    // Caution: The number of Captions *must*
    // equal the number of Pictures!

    Caption[1] = "Proje Slayt1";
    Caption[2] = "Proje Slayt2";
    Caption[3] = "Proje Slayt3";
    Caption[4] = "Proje Slayt4";
    Caption[5] = "Proje Slayt5";

    // =====================================
    // Do not edit anything below this line!
    // =====================================

    var tss;
    var iss;
    var jss = 0;
    var pss = Picture.length-1;

    var preLoad = new Array();
    for (iss = 1; iss < pss+1; iss++){
    preLoad[iss] = new Image();
    preLoad[iss].src = Picture[iss];}

    function control(how){
    if (showHot){
    if (how=="H") jss = 1;
    if (how=="F") jss = jss + 1;
    if (how=="B") jss = jss - 1;
    if (jss > (pss)) jss=1;
    if (jss < 1) jss = pss;
    if (document.all){
    document.images.PictureBox.style.filter="blendTrans(duration=2)";
    document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
    document.images.PictureBox.filters.blendTrans.Apply();}
    document.images.PictureBox.src = preLoad[jss].src;
    if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
    if (document.all) document.images.PictureBox.filters.blendTrans.Play();
    }}

    </script>

    </head>

    <!--
    Add onload='showHot=true;' to the body tag. This is
    needed to prevent false object calls while the page
    is loading. Optional: If you are using this in a
    popup, as in this demo, adding self.focus() to the
    onload event in the body tag will bring the popup
    to the front each time it is loaded [recommended].
    //-->

    <body onload='showHot=true;self.focus();' bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000">

    <!--
    The following table holds the images, captions, and controls.
    Place the table in your page where you want the slideshow
    to appear. Follow the instructions for each table cell.
    //-->

    <div align="center">
    <center>

    <table border=0 cellpadding=10 cellspacing=0>
    <tr>
    <!--
    The next table cell holds the images.
    Set cell and image width and height the same.
    The img src must have name=PictureBox in its
    tag. Often, the first image in the Picture
    array in the script is used here; but you
    may also use a different, introductory image
    as we have here, since this image is shown
    only on start-up.
    //-->
    <td height=563 colspan="3">
    <img src=images/01.JPG name=PictureBox width=750 height=563> </td>
    </tr>
    <tr>
    <!--
    The next table cell holds the captions.
    This table cell must have id=CaptionBox and
    class=Caption in its tag. The default caption
    shows whilst loading in all browsers; NS4
    will show only the default caption, throughout.
    //-->
    <td id=CaptionBox class=Caption align=center colspan="3">
    Proje
    </td>
    </tr>
    <!--
    The following three cells contain the controls.
    Each of the control a href's must contain class=
    Controls, to attach the styles (see top of script).
    To dress this up a bit, you can of course substitute
    <img src> images for the text in the links.
    //-->
    <tr>
    <td width="297" align="right">
    <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=11100570&url=#" onClick="javascript:control('B');" data-href="#" onClick="javascript:control('B');">< <</a> </td>
    <td width="127" align="center">
    <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=11100570&url=#" onClick="javascript:control('H');" data-href="#" onClick="javascript:control('H');">| | |</a> </td>
    <td width="303" align="left">
    <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=11100570&url=#" onClick="javascript:control('F');" data-href="#" onClick="javascript:control('F');"><b>> ></b></a> </td>
    </tr>
    </table>

    </center>
    </div>

    </body>
    </html>




  • Yapay Zeka’dan İlgili Konular
    TDU 2 RESİM GALERİSİ
    14 yıl önce açıldı
    Daha Fazla Göster
    
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.