1. 홈
  2. 질의 응답
  3. javascript slideshow

javascript slideshow

2011-04-19 6 views
0

괜찮은 것 같지만 자바 스크립트 슬라이드 쇼를 만들 수있는 자습서 나 코드 라이브러리 (JQuery, Mootools)가 필요합니다. 누군가 JQuery와 Mootools의 다른 점을 설명해 주시겠습니까? 그리고 사용하는 대상은 무엇입니까? 내가이 장소를 찾으면 슬라이드 쇼를하는 데 도움이 될지 이해하지 못합니다. 이미 하나 있지만 내 페이지가 올바르게 작동하지 않습니다. 여기에 내 코드를 찾아 주셔서 감사합니다. 나는 또한
에 대해 만족하고 있습니다. 거기에 highway12.jpg를 넣었지만 슬라이드 쇼가 아니라 1 장의 사진 만 제공합니다.javascript slideshow

<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

도움이됩니다 전에이 자습서를 사용 가지고 이쪽을 봐 http://jqueryvsmootools.com/

을 가지고 시도 할 수 사양 하지만 여전히 웹 응용 프로그램을 작성하는 경우 기본 사항을 사용하는 방법과 사용법을 최소한 알고 있어야한다고 생각합니다.

jQuery는 유비 쿼터스입니다. 모든 도서관이 당신과 함께 가기로 결정 했음에도 불구하고 모든 사람들이 적어도 기본에 익숙해야한다고 생각합니다.

원래 슬라이드 쇼 질문과 관련하여 페이지의 html 요소를 요소/노드의 배열로 생각할 수 있습니다. 예를 들어 <img> 요소를 <div class="slideshow"> 컨테이너에 추가하면 내부의 항목을 직접 루프 할 수 있습니다.

는

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

출처

2012-05-31 17:20:46 DaveAlger

0

당신이 다음 img 요소의 위치를 ​​기회 Transition를 사용하여 자신의 슬라이드를 만들 수 있습니다 ... 아래의 샘플이 행동에 그것을보고 참조하십시오. 나는 예를 들면 공중 선회만을 사용한다. 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>

출처

2015-10-08 04:19:18 user1914578

관련 문제

 관련 문제