ПОМОГИТе JavaScript
Парни, я в javascript начинающий, а надо зделать задание, я 3 дня голову ломаю.. Помогите, а лучше подскажите что надо знать чтобы выполнить это задание(без использования JQuuer).
Задание: # Создайте фотогалерею для web, для этого подготовьте графические изображения, объединенные общей темой (тема свободная). Необходимо предоставить пользователю возможность просмотра слайд-шоу изображений и возможность запуска и остановки слайд-шоу. Для увеличения скорости отображения страницы и скорости изменения графических образов используйте один из способов оптимизации отображения графических образов. |
1. Javascript (Ваш Кэп)
2. Базовые знания DOM выборка элементов, изменение стилей. Цитата:
|
Да в универе. И если можно, объясните что за способы оптимизации?? Или сыль дайте на примеры
|
Я только один способ знаю оптимизации, в фотошопе/гимпе, когда сохраняешь, качетсво поменьше ставишь. =)
Или я не понял о чем речь. %) Преподу сколько лет? Он такие асбтрактные задания дает. Вернее тут два пути. Либо вы проходили это на лекциях, и тогда вы сам себе злобный буратино, раз не знаете; либо действительно что-то не то. |
Цитата:
Цитата:
|
Спасибо за помощь) А насчет лекций, на них рассказывают левый материал + лектор видимо сам не понимает, что объясняет. В общем спасибо, буду очень благодарен, если покидаете ссылки на материалы которые могут понадобиться.
P.S. Спасибо всем кто помог |
Ради интереса набросал. Остальной функционал очень легко докидывается.
<html>
<head>
<script>
window.onload = function(){
var viewWin = document.getElementById('view');
var imgArray = document.getElementById('preview').querySelectorAll('img');
var viewImg = document.createElement('img');
viewImg.height = 300;
viewImg.width = 300;
if(!viewImg.src){
viewImg.src = imgArray[0].src;
}
viewWin.appendChild(viewImg);
for(var i = 0; i < imgArray.length; i++){
imgArray[i].onclick = function(){
viewImg.src = this.src;
}
}
}
</script>
<style>
#view{
height: 300px;
width: 300px;
border: 1px solid #000;
margin-bottom: 30px;
}
#preview img{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="view"></div>
<div id="preview">
<img src="http://demotivators.rublogs.org/wp-content/uploads/2010/02/716481_nu-davaj-rasskazhi-ej-pro-nasledovanie-klassov-v-javascript.jpg" />
<img src="http://demiart.ru/forum/uploads1/post-67980-1218433439.jpg" />
<img src="http://freebsd-services.com/wp-content/uploads/2009/08/sql-injection-database.jpg" />
</div>
</body>
</html>
P.S. а такой вопрос, как многие на форуме делают что бы код выполнялся сразу в песочнице? |
[ JS run ] alert('qwe'); [ /JS ]
пробелы убрать |
Цитата:
|
Цитата:
|
Можете помочь со слайдшоу? Вроде всё просто но ничего не работает
|
Цитата:
|
хочу доработать код, который писали на 1й странице. И в мыслях сделать, чтобы слайдшоу шло, там где основное изображение при нажатой кнопке. А что именно не получаеться пока непонятно т.к. я хз как вобще это реализовать
|
Т.е. при нажатии на кнопку следующее изображение?
|
Michunter,
Может быть стоит почитать книги, а не просто гундеть - хз, я в js не очень и препод тупой? Ты ещё не показал ничего, что сделал сам, даже в переработанном коде. Иди и делай, не будет получаться, тогда для тебя даже RTFM специальный придумали: Здравствуйте! Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. А с чем не справитесь - поможем. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/ Задавайте конкретные вопросы по ходу дела. |
<script>
window.onload = function(){ viewWin = document.getElementById('view'); imgArray = document.getElementById('preview').querySelectorAl l('img'); viewImg = document.createElement('img').setAttribute('id', 'abs'); viewImg.height = 300; viewImg.width = 450; if(!viewImg.src){ viewImg.src = imgArray[0].src; } viewWin.appendChild(viewImg); for(var i = 0; i < imgArray.length; i++){ imgArray[i].onclick = function(){ viewImg.src = this.src; } } } </script> Помогите с атрибутом для viewImg Пытался viewImg.getAttribute("id","gwe"); но почему-то не работает |
Цитата:
Цитата:
|
<html>
<head> <script> window.onload = function Img(){ viewWin = document.getElementById('view'); imgArray = document.getElementById('preview').querySelectorAl l('img'); viewImg = document.createElement('img'); viewImg.height = 300; viewImg.width = 450; if(!viewImg.src){ viewImg.src = imgArray[0].src; } viewWin.appendChild(viewImg); viewImg.id = 'viewImg'; for(var i = 0; i < imgArray.length; i++){ imgArray[i].onclick = function(){ viewImg.src = this.src; } } } function Slide(){ setInterval(function show(){ m = 1; while(m <= imgArray.length) { document.getElementbyId('viewImg').setAttribute('s rc',imgArray[m]); m++; } },1000); } </script> <style> #view{ height: 300px; width: 450px; border: 1px solid #000; margin-bottom: 30px; } #preview img{ height: 100px; width: 150px; } </style> </head> <body> <div id="view"></div> <div id="preview"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <div> <img src="4.jpg" /> <img src="5.jpg" /> <img src="6.jpg" /> </div> </div> <br> <br> <br> <input name="but" type="button" value="Слайдшоу" OnClick="Slide()"> </body> </html> Не работает слайдшоу. Подскажите, что в коде не так? |
Правильно так:
document.getElementbyId('viewImg').src = imgArray[m];
Что за пробелы?
query[COLOR="Red"]SelectorAl l[/COLOR]('img');
setAttribute([COLOR="red"]'s rc'[/COLOR],imgArray[m]);
Так правильно синтаксичесски: OnClick="Slide();" Убери имя Img
window.onload = function Img(){
|
спасибо, но я немного не уточнил проблему. Со слайдшоу чтобы изображение менялось через определенные промежутки времени. Я попытался своими силами, но не получается
function show(){ var duration = 6000; //общая длительность var start = new Date().getTime(); // время старта setTimeout(function() { now = (new Date().getTime()) - start; var progress = now/duration; m = viewImg.setAttribute('src',imgArray[now].src); if(progress < 1) setTimeout(arguments.callee, 1000); }, 6000); } может есть ошибка которую я не вижу.. или код бредовый? |
Michunter,
может быть пора начать форматировать по человечески свой код в сообщениях, а не мучить окружающих? |
<html>
<head>
<script>
window.onload = function (){
viewWin = document.getElementById('view');
imgArray = [];
for(var n=0;n<6;n++)
{
imgArray[n]=document.getElementById(n);
}
viewImg = document.createElement('img');
viewImg.height = 300;
viewImg.width = 450;
if(!viewImg.src){
viewImg.src = imgArray[0].src;
}
viewWin.appendChild(viewImg);
viewImg.id = 'viewImg';
for(var i = 0; i < imgArray.length; i++){
imgArray[i].onclick = function(){
viewImg.src = this.src;
}
}
}
function play(){
if(document.getElementById('stop').onClick)
clearTimeout(joo);
var duration = 12; //общая длительность
var start = new Date().getSeconds(); // время старта
joo = setTimeout(function (){
var now = (new Date().getSeconds()) - start;
if(now > start)
var now = start - (new Date().getSeconds());
progress = now/duration;
document.getElementById('viewImg').setAttribute('src',imgArray[now-1].src);
if(progress < 1)
setTimeout(arguments.callee, 1000);
}, 1000);
}
</script>
<style>
#view{
height: 300px;
width: 450px;
border: 1px solid #000;
margin-bottom: 30px;
}
#preview img{
height: 100px;
width: 150px;
}
</style>
</head>
<body>
<div id="view"></div>
<div id="preview">
<img id="0" src="1.jpg" />
<img id="1" src="2.jpg" />
<img id="2" src="3.jpg" />
<div>
<img id="3"src="4.jpg" />
<img id="4" src="5.jpg" />
<img id="5"src="6.jpg" />
</div>
</div>
<br>
<br>
<br>
<div>
<input id="start" type="button" value="Запуск" onClick="play()" >
<br>
<div><input id="stop" type="button" value="Остановка"></div>
</div>
</body>
</html>
помогите кнопку стоп сделать буду очень благодарен P.S. Не знаю почему так код выдает... не знаю с чем это связано |
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
| Часовой пояс GMT +3, время: 17:54. |