Блог

Главная - Вопросы по программированию - слайд-шоу javascript

слайд-шоу javascript

#javascript

#javascript

Вопрос:

Хорошо, это может показаться глупым, но я предполагаю найти учебное пособие или библиотеку кода (jQuery, Mootools), которая позволяет создавать слайд-шоу на JavaScript. Может кто-нибудь, пожалуйста, объяснить мне, чем отличаются jQuery и Mootools и для чего они используются.Еще я не понимаю, если я пойду искать эти места, поможет ли это мне сделать слайд-шоу. У меня уже есть одно, но моя страница работает некорректно. Вот мой код, спасибо, что посмотрели.Я также обеспокоен тем,
что я поместил highway12.jpg там, но дает мне только 1 картинку, а не слайд-шоу.

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

Ответ №1:

Выбор между двумя библиотеками JS обычно зависит от спецификации, а затем предпочтений. Если вам нужна помощь в выборе спецификации, вы могли бы попробовать посмотреть здесьhttp://jqueryvsmootools.com

Я предпочитаю jquery и ранее использовал этот урок, который поможет http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/

Ответ №2:

мой текущий проект вообще не использует jQuery, но я все еще думаю, что вы должны хотя бы знать, что это такое и как использовать основы, если вы занимаетесь созданием веб-приложений.

jQuery настолько вездесущ, что я думаю, каждый должен быть хотя бы знаком с его основами, независимо от того, с какой библиотекой вы решите работать.

что касается вашего исходного вопроса о слайд-шоу, вы можете представить html-элементы вашей страницы как массив элементов / узлов. например, при добавлении <img> элементов в <div class="slideshow"> контейнер элементы внутри могут быть зациклены напрямую.

посмотрите пример ниже, чтобы увидеть его в действии…

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

Ответ №3:

вы можете создать свой собственный слайд, используя переход , а затем изменить положение элемента 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>