1. 首页
  2. 问答
  3. javascript幻灯片

javascript幻灯片

2011-04-19 168 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

相关问题

 相关问题