Простой поворот изображения JavaScript

У меня есть простой ротатор изображений на веб-сайте, состоящий из 4 изображений, которые должны появиться в течение нескольких секунд, прежде чем показывать следующий. Кажется, что он работает над первым циклом, но затем, когда он возвращается к первому изображению, он не показывает, что один, но снова работает со второго изображения и так далее, всегда пропускает это изображение в каждом цикле. Функция вызывается с использованием onLoad EH в теле. В теле есть img с моим первым изображением внутри него. Я ноб, поэтому, пожалуйста, будьте осторожны, если я что-то пропустил. Вот что у меня есть ...Простой поворот изображения JavaScript

<body onLoad="sunSlideShow()"> 

    <img src="IMAGES/slider1.gif" alt="slide-show" id="mySlider" width="900"> 

<body> 




var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif"); 

var i = 0 


function sunSlideShow() 
{ 
    document.getElementById("mySlider").src = ("IMAGES/" + quotes[i]); 

    if (i<4) 
    { 
     i++; 
    } 

    else 

     i = 1; 

    setTimeout("sunSlideShow()", 3000); 

} 
sunSlideShow()

источник

2014-02-14 Orbital676

Изменить 'i = 1' на' i = 0'. – ElendilTheTall

Черт! Почему я этого не увидел. Благодарю. – Orbital676

Изменить его к этому:

else i = 0; setTimeout("sunSlideShow()", 3000);

источник

2014-02-14 11:19:59 lshettyl

===================== ============================================

EDIT : Это неправильно ... пожалуйста, найдите мой другой ответ на этой странице.

================================================================================================================================== ====================

Для начала я бы не использовал ... вам лучше начинать сценарий с jquery, как только страница загружен.

Добавьте это в голову раздел:

<script type="text/javascript"> 
    $(function() { 
     sunSlideShow(); 
    } 
</script>

Это будет срабатывать функция sunSlideShow после загрузки страницы.

Затем вы начинаете слайд-шоу с var i = 0 ... но когда вы добрались до четвертого изображения, вы установите его на 1?

У меня возникло бы желание использовать цикл while для достижения желаемого.

Что-то вроде этого:

<script type="text/javascript"> 
$(function() { 
    sunSlideShow(); 
} 
var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif"); 
var i = 0; 
function sunSlideShow(){ 
    while (i<4) 
     { 
      document.getElementById("mySlider").src = ("IMAGES/" + quotes[i]); 
      if (i<4) 
       { 
        i++; 
       } 
      else 
       { 
        i = 0; 
       } 
      sleep(3000); 
     } 
} 
function sleep(miliseconds){ 
    var currentTime = new Date().getTime(); 
    while (currentTime + miliseconds >= new Date().getTime()){} 
} 
</script>

Этот сценарий не был проверен ... но он должен запустить функцию sunSlideShow после загрузки страницы, а затем изменить изображение каждые 3 секунды.

источник

2014-02-14 11:30:55

Я думаю, что было бы лучше использовать [setInterval] (https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval) здесь. – Johnny

Yeh - Я играю с jsfiddle и считаю, что вы правы! –

Вот рабочая версия с использованием setInterval http://jsfiddle.net/pq6Gm/12/ –

В дополнении к моему другому ответу (!, Который был неправильно) ... Попробуйте это:

http://jsfiddle.net/pq6Gm/13/

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     setInterval(sunSlideShow,3000); 
    }); 
    var quotes = [ 
     "http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2007/07/11/sun128.jpg", 
     "http://icons.iconarchive.com/icons/robinweatherall/seasonal/128/sun-icon.png", 
     "http://www.astronomytoday.com/images/sun3.gif", 
     "http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png" 
    ]; 
    var i = 0; 
    function sunSlideShow() { 
     document.getElementById("mySlider").src = quotes[i]; 
     if (i < (quotes.length-1)) 
      { 
       i++; 
      } 
     else 
      { 
       i = 0; 
      } 
    } 
</script> 
<body> 
    <img src="http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png" id="mySlider"/> 
</body>

источник

2014-02-14 12:22:35

Я тоже искал в Интернете, пытаясь найти общее решение проблемы оворота изображение о его центре. Я придумал свое решение, которое прекрасно работает. Основная концепция проста: поверните весь контекст на нужный угол (здесь называется «наклон»); вычислить координаты изображения в новой системе координат; нарисуйте изображение; наконец, поверните контекст обратно в исходное положение. Вот код:

 var xp = rocketX * Math.cos(tilt) - rocketY * Math.sin(tilt); 
     var yp = rocketX * Math.sin(tilt) + rocketY * Math.cos(tilt); 
     var a = rocketX - xp; 
     var c = Math.sqrt(a*a + (rocketY-yp)*(rocketY-yp)); 
     var beta = Math.acos(a/c); 
     var ap = c * Math.cos(tilt + beta); 
     var bp = c * Math.sin(tilt + beta); 
     var newX = rocketX + ap; 
     var newY = rocketY - bp; 
     context.rotate(tilt); 
     context.drawImage(littleRocketImage, newX-9, newY-40);   
     context.rotate(-tilt);

В предпоследней строке, константы «9» и «40» являются половиной размера изображения; это гарантирует, что повернутое изображение помещается так, что его центр совпадает с центром исходного изображения.

Одно предупреждение: я использую это только для первых квадрантных поворотов; вам придется ввести стандартные тесты для других квадрантов, которые меняют признаки компонентов.

источник

2014-03-31 14:47:04 user3470600

Простой поворот изображения JavaScript

ответ

Смежные вопросы