С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.56/16: Рейтинг темы: голосов - 16, средняя оценка - 4.56
Heidel
113 / 113 / 39
Регистрация: 11.10.2011
Сообщений: 647
1

Средствами jQuery сделать смену картинок

09.07.2012, 15:42. Просмотров 2870. Ответов 10
Метки нет (Все метки)

Сейчас на сайте сделан такой слайдер http://n.inetech.ru/ (верхняя картинка в декоративной рамке).
Интересует, можно ли средствами jQuery сделать смену картинок наподобие того как это сделано на этой странице http://clinic-kaluga.ru/ (там сделан flash)/
Как реализовать подобное средствами jQuery ?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.07.2012, 15:42
Ответы с готовыми решениями:

Как сделать неактивную кнопку средствами jQuery?
В общем есть кнопка <button id = "button_1">Кнопка</button> как сделать ее...

jQuery.Parallax как сделать движение картинок против движения курсора?
Добрый день. Хотела спросить, может кто знает как сделать. Я с помощью...

Убрать автоматическую смену слайдов в карусели jQuery
Никак не могу понять что менять. Необходимо убрать автоматическую смену...

В чем ошибка? Не получается сделать смену картинок по ОнМоусеОвер в теле скрипта
Почему внутри скрипта не работает смена картинки. Т.е. пишу следующее <--!...

Как сделать плавную смену картинок при нажатии клавиш "стрелок" на клавиатуре
В примере указанном по ссылке: http://www.litecode.ru/javascript/xfade.shtml...

10
suharik
260 / 246 / 57
Регистрация: 03.09.2010
Сообщений: 805
09.07.2012, 18:43 2
В твоем скрипте вместо animate сделать fadeIn и fadeOut.
0
Heidel
113 / 113 / 39
Регистрация: 11.10.2011
Сообщений: 647
09.07.2012, 18:48  [ТС] 3
suharik, а прымер какой-нибудь?
так то про то, что мне нужен fadeIn и fadeOut я уже прочитала, но еще не разбиралась.
0
SlashX6
16 / 16 / 9
Регистрация: 16.03.2012
Сообщений: 437
10.07.2012, 17:31 4
Heidel, вот смотрите, пример одного слайдера.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<head>
<script type="text/javascript" src="jQuery.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function() {
   $("#sliderdiv").hide();
      
    $(window).load(function() {
      $("a#toggle").click(function() {
        
        $("#sliderdiv").slideToggle(400);
    });
  });
});
</script>
</head>
<body>
    <a href="#" id="toggle">Show More</a>
    <div id="sliderdiv">
        <div id="contentgoeshere">Например, текст или картинка, которая будет показываться при нажатии ссылки</div>
   </div>
</body>
CSS документ поправьте как вам надо. Вот например и CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@charset "utf-8";
#contentgoeshere {
    background-image:url(img4.gif);
    height: 100px;
    width: 100px;
    margin: 0 auto;
    margin-left: 5px;
    margin-top: 5px;
 
}
#slidediv   {
    height:110px;
    width: 110px;
    margin: 0 auto;
    margin-left: 0px;
}
0
Jazz411
85 / 33 / 12
Регистрация: 12.03.2011
Сообщений: 234
Записей в блоге: 2
12.07.2012, 20:19 5
Я только начал изучать JS, можете объяснить принцип по которому он (слайдер) работает, или киньте ссылку на статью, буду очень благодарен
0
SlashX6
16 / 16 / 9
Регистрация: 16.03.2012
Сообщений: 437
13.07.2012, 00:21 6
Jazz411, если честно, то я сам вот только неделю изучаю jQuery и совсем немного Java Script.

По ссылкам ниже очень неплохие материалы

jQuery - http://www.wisdomweb.ru/JQ/ui.php

Java Script - http://www.wisdomweb.ru/JS/javascript-first.php
0
Jazz411
85 / 33 / 12
Регистрация: 12.03.2011
Сообщений: 234
Записей в блоге: 2
13.07.2012, 00:31 7
SlashX6, да, я знаю этот сайт и сам по нему учусь вот только принцип слайдера не совсем понимаю
принцип в том что бы загружать в объект формы(страницы, документа) картинку, а потом при нажатии или еще каком действии заменять её на другую подгружаемую? и что самое интересно я не очень понимаю взаимодействие анимации и css
Если не сложно объясните эти вопросы
0
SlashX6
16 / 16 / 9
Регистрация: 16.03.2012
Сообщений: 437
13.07.2012, 13:42 8
Jazz411, "принцип в том что бы загружать в объект формы(страницы, документа) картинку, а потом при нажатии или еще каком действии заменять её на другую подгружаемую?" --- В какой-то мере и так, т.к. у jQuery есть библиотека, которую вы подключаете, насколько я знаю, то в той библиотеке есть уже свои эффекты. Например, есть идругие эффекты, для которых надо задавать дополнительные библиотеки, например для эффекта accordion.
Наприме, первые 3 строчки кода задают путь к библиотеке, которая как я понял - онлайн.

Вот сам пример:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#accordion
{font-size:0.8em;}
</style>
 
<script type="text/javascript">
 
    $(document).ready(function() {
        $("#accordion").accordion( {
        autoHight: false,
        active: false
        });
    });
</script>
<body>
 
<div id="accordion">
    <h2><a href="#">Title</a></h2>
    <div>
    <p><b>Медведи</b> (лат. Ursus) — род млекопитающих отряда хищных.</p>
    </div>
 
    <h2><a href="#">Title 2</a></h2>
    <div>
    <p> Все современные четыре вида рода, а также ряд вымерших (таких, например, как пещерный медведь Ursus spelaeus) происходят</p>
    <p>от этрусского медведя (Ursus etruscus), жившего 2-1 миллиона лет назад.
    </p>
    </div>
    
    <h2><a href="#">Title 3</a></h2>
    <div>
    <p>Some Random Text Should Appear Here</p>
    <p>Also, It Should Appear In 2 Paragraphs</p>
    <p><b>And This, Sould Appear In Bold</b></p>
    </div>
</body>
Насчёт анимации. Насколько я понимаю, jQuery сам отвечает за анимации и CSS за это не отвечает,т.к. jQuery сам обрабатывает анимацию, скриаты. Да, безусловно в CSS можно задать параметры для отображения Div тэгов, а соответственно в них, уже будет отображаться скрипт. Т.е. в jQuery мы задаём скрипт и анимацию, а в CSS место для его отображения.
1
Jazz411
85 / 33 / 12
Регистрация: 12.03.2011
Сообщений: 234
Записей в блоге: 2
13.07.2012, 16:54 9
SlashX6, спасибо разобрал твой пример и так понял что надо покопаться в JQ - ui там как раз описан их набор
И вот если кому нужно пример элементов на сайте JQ
0
SlashX6
16 / 16 / 9
Регистрация: 16.03.2012
Сообщений: 437
13.07.2012, 19:06 10
Jazz411, рад что смог хотябы чем-то помочь!
0
Soldado
731 / 722 / 137
Регистрация: 28.06.2012
Сообщений: 1,318
Записей в блоге: 4
13.07.2012, 20:53 11
Как вариант, хочу предложить следующее: подобную смену картинок можно сделать в программе Easy GIF Animator.rar.
Все знают анимационные gif-картинки, в них смена изображений "забита" в самом изображении. В программе можно задать и время смены изображений и эффект. Распакуйте архив и запускайте, программа портабельна ( установка не требуется).
1
13.07.2012, 20:53
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.07.2012, 20:53

Не могу заставить работать смену картинок
Добрый вечер! помогите разобраться необходимо заставить работать слайдбар!...

Поиск средствами jquery
имеется код поиска...

Select средствами JQuery
Добрый день. Создан раскрывающийся список средствами JS: function...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru