Question

好吧这可能听起来很愚蠢，但我想找一个允许你创建JavaScript幻灯片的教程或代码库（JQuery，Mootools）。有人可以向我解释一下JQuery和Mootools有什么不同以及它们用的是什么。另一个我不明白如果我去找这些地方它会帮我做幻灯片放映。我已经有一个，但我的页面工作不正确。这是我的代码感谢look.I我也很喜欢我把highway12.jpg放在那里，但只给我一张照片，而不是幻灯片。

<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>

Answer 1

在两个JS库之间进行选择通常取决于规范，然后是首选项。如果您想在规范方面选择一些帮助，可以尝试查看http://jqueryvsmootools.com/

我更喜欢jquery，并且之前使用过本教程将有助于http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/

Answer 2

我当前的项目根本没有使用jQuery，但我仍然认为如果你正在构建Web应用程序，至少应该知道它是什么以及如何使用基础知识。

jQuery是无处不在的我认为每个人都应该至少熟悉它的基础知识，无论你决定使用哪个库。

关于您的原始幻灯片问题，您可以将页面的html元素视为元素/节点数组。例如，当您将<img>元素添加到<div class="slideshow">容器时，内部的项目可以直接循环。

请参阅下面的示例，了解它的实际效果......

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

Answer 3

你可以使用 Transition 制作自己的幻灯片，然后放弃img元素的位置。我只使用悬停。你可以使用js来改变img元素的左边位置，为一些很棒的动画创建一些创意脚本。你也可以学习动画和关键帧：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>

javascript幻灯片

3 个答案: