1. 首頁
  2. 問答
  3. javascript幻燈片

javascript幻燈片

2011-04-19 188 views
0

好吧，這可能聽起來很愚蠢，但我想找到一個教程或代碼庫（JQuery，Mootools），允許您創建一個JavaScript幻燈片。有人可以向我解釋什麼是JQuery和Mootools的不同，以及它們的用途。另一個我不明白，如果我去找這些地方是否會幫助我做幻燈片放映。我已經有一個，但我的網頁無法正常工作。這裏是我的代碼謝謝look.I也爲
comfused我把highway12.jpg在那裏，但只給我1張照片，而不是幻燈片。javascript幻燈片

<head> 
<title>Javascript Slideshow</title> 
<script language="javascript"> 
<!-- 
var interval = 1500; 
var randome_display = 0; 
var imageDir = "my_images/"; 
var imageNum = 0; 
var totalImages = imageArrays.length; 
imageArray = new Array(); 
ImageArray[imageNum++] = new imageItem(imageDir + "highway12.jpg"); 
ImageArray[imageNum++] = new imageItem(imageDir + "lighthouse.jpg"); 
ImageArray[imageNum++] = new imageItem(imageDir + "landscape.jpg"); 
ImageArray[imageNum++] = new imageItem(imageDir + "shore.jpg"); 
ImageArray[imageNum++] = new imageItem(imageDir + "seashore.jpg"); 
ImageArray[imageNum++] = new imageItem(imageDir + "roughwaters.jpg"); 
ImageArray[imageNum++] = new imageItem(imageDir + "bigwave.jpg"); 
ImageArray[imageNum++] = new imageItem(imageDir + "sunset.jpg"); 
function imageItem(image_loaction) { 
this.image_item = new Image(); 
this.image_item.src = omage_loaction; 
} 

function get_ImageItemLoacation(imageObj) { 
return(imageObj.image_item.src) 
    } 

function randNum(x ,y) { 
var range = y - x + 1; 
return Math.Floor(Math.random() * range) + x 
    } 
function getNextImage() { 
if(random_display) { 
imageNum = randNum(0, totalImages-1); 
    } 
else { 
imageNum = (imageNum+1) % totalImages; 
    } 
var new_image = get_ImageItemLaction(imageArray[imageNum]); 
    return(new_image); 
    } 

    function getPrevImage() { 
imageNum =(imageNum-1) % totalImages; 
var new_image = get_ImageItenLocation(imageArray[imageNum]); 
return(new_image); 
    } 

    function prevImage(place { 
var new_image = getPrevImage(); 
document[place].src= new_image; 
    } 
function switchImage(place) { 
var new_image = getNextImage(); 
document[place].src =new_image; 
var recur_call = "switchImage(' "+place+"')'; 
timerID =setTimeout(recur_call, interval); 
    } 

    //--> 
    </script> 

</head> 
<body> 
<img name="javascriptslid" src="highway12.jpg" width=400 height=300 border=5px align="middle"><br /> 


<a href="#" onClick="switchImage('slideImg')">play slide show</a> 
<a href="#" onClick="clearTimeout(timerID)"> pause</a> 
<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a> 
<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a> 
</body> 
</html>

來源

2011-04-19 norris1023

回答

0

我現在的項目沒有使用jQuery在所有但我仍然認爲，如果您正在構建Web應用程序，至少應該知道它是什麼以及如何使用基礎知識。

jQuery是如此無處不在我認爲每個人都應該至少熟悉它的基礎知識，無論你決定使用哪個庫。

關於您的原始幻燈片問題，您可以將頁面的html元素視爲元素/節點數組。例如，當您將<img>元素添加到<div class="slideshow">容器時，可以直接循環內部的物品。

請參見下面的示例看到它在行動......

http://jsfiddle.net/DaveAlger/eNxuJ/1/

來源

2012-05-31 17:20:46 DaveAlger

0

，你可以使自己的使用 Transition幻燈片，然後機會img元素的位置。我只使用懸停舉例。你可以使用js來改變img元素的左邊位置，爲某些awsome動畫製作一些創意腳本。你也可以學習動畫和關鍵幀：D

<!DOCTYPE html> 
<html> 
<head> 
    <style> 

     #main { 
      position:absolute; 
      width: 100px; 
      height: 100px; 
      overflow: hidden; 
     } 
     #div1 { 
      position: absolute; 
      top: 0px; 
      left: -100px; 
      width: 95px; 
      height: 100px; 
      background: red; 
      -webkit-transition: left 2s; /* For Safari 3.1 to 6.0 */ 
      transition: left 2s; 
     } 


     #div2 { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      width: 95px; 
      height: 100px; 
      background: yellow; 
      -webkit-transition: left 2s; /* For Safari 3.1 to 6.0 */ 
      transition: left 2s; 
     } 

     #main:hover #div1{ 
      left: 0px; 
     } 
     #main:hover #div2{ 
      left: 100px; 
     } 
    </style> 
</head> 
<body> 


    <div id="main"> 
     <div id="div1"></div> 

     <div id="div2"></div> 
    </div> 

</body> 
</html>

來源

2015-10-08 04:19:18 user1914578

相關問題

 相關問題