jQuery로 기본 이미지 회전

Question

배너 (두 개의 CSS 배경 이미지)를 테스트하고 각 페이지를 다시로드 할 때 무작위로 회전시키고 싶습니다. 플러그인을 사용하지 않고도 이와 같은 것을 달성 할 수 있습니까?

난 그냥 각를 다시 에 기본적으로 배너 요소에 무작위로 단지 교환 CSS 클래스 두 개의 이미지를 회전 할 필요가있다.

감사합니다.

Answer 1

특별히 CSS 클래스를 할당을 요구하기 때문에,이 할 수있는 JQuery와 기능이 http://docs.jquery.com/Attributes

Answer 2

각 페이지를 다시로드 할 때 이미지를 바꾸려면 javacript 대신 서버 쪽 스크립트를 사용해야합니다. 또 다른 옵션은 DOM이 준비되면 임의의 CSS를 적용하는 것입니다 :

$(function() { 
    // Get a random number between 1 
    var id = 1 + Math.floor(Math.random() * 11); 
    $('banner').css('background-image', 'url(/images/image' + id + '.jpg)'); 
}); 

Answer 3

가 banner_i 당신이 0과 N 사이의 숫자를 생성 할 수 Math.random() 사용 (N 가능한 배너의 숫자 인) 한 다음 표시 (0 < = i < = N).

은 같은 것을 할 수있는 수를 생성하려면 :

var N = 10; /* This is the maximum myBannerNumber can get */ 
var myBannerNumber = Math.floor(Math.random()*N); 

Answer 4

물론 일을! 이 같은 스크립트가 작동한다 : 새로운 광고를 할 때

다음

$(document).ready(function() { 
var ad_urls= ['image1.png', 'image2.jpg']; 
var i= Math.floor(Math.random()*ad_urls.length) - 1; 
$('#image_to_update').attr('src', ad_urls[i]); 
}); 

, 당신은 단지 ad_urls 배열을 업데이트 할 수 있습니다.

는이 관련된 몇 가지 더 많은 기능이 있습니다

$(function() { 
    var id = Math.floor(Math.random() * 10); 
    $("#banner").addClass("className" + id); 
} 

, 당신이 그 (것)들을 여기 문서화 찾을 수 있습니다 :