Как включить слайд-шоу в HTML?

Я хотел бы знать, можете ли вы помочь мне сделать слайд-шоу для моего HTML-документа. Я знаю, что мне понадобится JavaScript, и я уже знаю, как СДЕЛАТЬ слайд-шоу, но как мне сделать слайд-шоу доступным для просмотра в моем html-документе? Вот код, и я использую Adobe Brackets в качестве редактора:

//////HTML-КОД ////////

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="main.css" type="text/css">
        <title>Quentrum</title>
    </head>
    <body>
        <div id="wrapper">
        <header>
              <nav>
                <ul>
                    <li>
                        <a href="index.html">
                        Quentrum
                        </a>
                    </li>
                    <li>
                         <a href="Store.html">
                        Store
                        </a>
                    </li>
                    <li>
                         <a href="Support.html">
                        Support
                        </a>
                    </li>

                </ul>
                </nav>
            </header>
            <section>
                <h>----------Slideshow Goes HERE-----------</h>
            </section>
            <footer>
             <p>Quentrum 2015</p>
            </footer>
        </div>
    </body>
</html>

//////// КОД CSS /////////

body{
background-color:lightgray;
}
#wrapper{
width:inherit;
}
header{
background-color: white;
clear:both;
height: 50px;
border:solid 1px black;
border-radius: 5px;
width: inherit;
padding-right:195px;
padding-left:195px;
}

header ul {
list-style: none;
}
header ul li{
display: inline;
padding: 115px;
}
header a {
color: #777;
text-decoration: none;
font-family: Georgia;
font-size: 17px;
}
header a hover:{
color:black;
}
section{
clear: both;
height: 550px;
width: 100%;
border: solid 1px darkblue;
border-radius: 5px;
background: blue;
font-family: Georgia;
}
footer{
width: 100%;
border: solid 1px gray;
border-radius: 5px;
background: lightgray;
clear: both;
}
footer p {
font-family: Geogria;
margin-left: 30px;
}

Заранее спасибо!!!

РЕДАКТИРОВАТЬ [Я не думаю, что мне действительно нужно вставлять какой-либо код Javascript, но, пожалуйста, СКАЖИТЕ мне, если вам это нужно, и я его получу. Ради этого, когда вы отвечаете, вы можете просто притвориться, что имя моего файла javascript — «пример». Большое спасибо.]


person TechWiz77    schedule 16.06.2015    source источник


Ответы (5)


Надеюсь, это поможет очень просто, просто добавьте этот код туда, где вы хотите, тогда нет левой и правой ссылок на следующую и предыдущую, если вам нужны изображения одинакового размера, просто измените размер изображения, прочитайте примечания / комментарии для получения дополнительной информации.

<!-- Add below This To HEAD -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- Add below  this to your style sheet -->
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }

<!-- Add Below this where you want it in your page -->
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>

<!-- 
Add 
<li data-target="#myCarousel" data-slide-to="next number"></li>
to how many images you want or if you dont want any links to change images atall delete this up to indicators
-->     
      
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="firstimg.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="secondimg.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="thirdimage.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="fourthimage.jpg" alt="Flower" width="460" height="345">
        
<!-- Add for more images
<div class="item">
        <img src="nextimage.jpg" alt="..." width="460" height="345">
        
If want captions Add like so

<img src="filename.jpg" alt="alt">
      <div class="carousel-caption">
        <h3>Title</h3>
        <p>Caption</p>
      </div>
    </div>

        -->
       
      </div>
    </div>
  </div>
</div>

person RicPurcell    schedule 16.06.2015
comment
Здравствуйте, у меня возникли проблемы, код работает отлично, потому что я вижу свои изображения, но проблема заключается в изменении размера изображений. У меня большие трудности, потому что, когда я меняю размер рядом с картинками, ничего не происходит, а когда я меняю ширину на системном листе, я все еще не могу заставить его соответствовать моему разделу, независимо от того, набираю ли я 100% , или сколько пикселей, есть ли какой-то способ сделать это? Между прочим, я новичок в HTML, поэтому я просто добавил код, который вы сказали поместить в таблицу стилей, прямо под моим разделом в таблице стилей. Все хорошо? Заранее спасибо! - person TechWiz77; 18.06.2015
comment
попробуйте добавить это в свою таблицу стилей .carousel-inner > .item > img, .carousel-inner > .item > a > img { width:sizedesiredpx; height:sizedesiredpx; } id, это не работает, затем отправьте свой полный код и сообщите мне размер, который вы хотите, чтобы изображения были, и я попытаюсь исправить это для вас. - person RicPurcell; 18.06.2015
comment
Я действительно думаю, что это был сбой. Поэтому я удалил весь добавленный код, затем прочитал его, и это сработало. Большое спасибо, потому что именно это я и сделал! Спасибо. - person TechWiz77; 18.06.2015
comment
приветствую вас, рад, что смог помочь мне настроить мой тоже, но в конце концов я добрался, посмотрите, если вам нравится rbgraphix.co.uk/gallery/display/New/slideshow.php (изображение там не будет тем изображением, которое я показываю, это было просто для его создания) мои выборки имя и заголовок изображения из базы данных sql, которая позволяет пользователям загружать изображения. - person RicPurcell; 18.06.2015
comment
Итак, теперь у меня есть крошечный вопрос, теперь, когда мое слайд-шоу включено, мой фон, который у меня был раньше, не отображается, фон всего веб-сайта, тот, который я поместил в body{}. И мой текст нижнего колонтитула стал меньше, и моя панель навигации вверху, слова в ней больше не центрированы, они выдвинуты вверх. Знаете ли вы, есть ли способ исправить это? Или это потому, что я связываю себя с таблицей стилей сайта начальной загрузки. - person TechWiz77; 18.06.2015
comment
пришлите мне код и ссылку на фоновое изображение, чтобы я мог скачать его, и я посмотрю и постараюсь исправить это для вас - person RicPurcell; 18.06.2015

Это может быть не так, как вы хотите, однако есть встроенная опция слайд-шоу Bootstrap.

Это называется каруселью, вот ссылка на учебник: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

person repo    schedule 16.06.2015

Вы можете сделать это через jQuery.

        $(function () {

            $("#slideshow > div:gt(0)").hide();

            setInterval(function () {
                $('#slideshow > div:first')
                        .fadeOut(1000)
                        .next()
                        .fadeIn(1000)
                        .end()
                        .appendTo('#slideshow');
            }, 3000);

        });

Пример: JSFiddle

person Geoffrey    schedule 16.06.2015
comment
Здравствуйте, если посмотреть на ваш, он тоже выглядит хорошо, но как мне теперь связать этот файл JavaScript с моим html? - person TechWiz77; 19.06.2015
comment
Вы можете поместить его в теги ‹script›‹/script› внизу страницы. - person Geoffrey; 22.06.2015

я решил для вас проблему с нижним колонтитулом и навигацией, я думаю, просто загрузите этот новый файл css и замените его текущим bootstrap.css

Ссылка на Bootstrap CSS Нажмите, чтобы скачать Проверьте свой CSS, я заметил, что он говорит светло-серый, а не светло-серый

также добавьте это в свой текущий main.css

footer p {
font-family: Geogria;
margin-left:30px;
font-size:16px; /* Font Size You Want */
}

и что касается вашего цвета фона, измените его на светло-серый, и он должен работать нормально после выполнения этих шагов.

person RicPurcell    schedule 19.06.2015
comment
Хорошо, спасибо за это, я попробую, мой html-редактор позволяет светло-серый, есть ли большая разница? Я просто хочу знать, потому что я никогда раньше не делал веб-сайт, и я хотел бы знать, читает ли браузер его по-другому? Здесь, в США, мы пишем серый, g-r-a-y Я знаю, что, вероятно, в Великобритании и других частях серый пишется g-r-e-y. Но ничего, я попробую новый бутстрап и посмотрю, как он работает. - person TechWiz77; 19.06.2015
comment
Я не уверен в разнице, кроме оттенка цвета, но при использовании серого в вашем коде он не отображал цвет для меня, когда я изменил его на серый, это показало лично, что я использую шестнадцатеричный код цвета вместо названия цвета, как вы можете будьте более точны в оттенках, шестнадцатеричный код для серого - #808080, и браузеры правильно их считывают, если вы хотите использовать шестнадцатеричный код, вы можете найти шестнадцатеричные коды цветов по адресу color-hex.com, просто введя название цвета, и он покажет вам шестнадцатеричный код цвета для различных оттенков. - person RicPurcell; 20.06.2015
comment
О, спасибо, я понял. Итак, теперь мне интересно, могу ли я ссылаться на bootstrap css только в том месте, где у меня есть слайд-шоу? Вместо функции ‹head›? - person TechWiz77; 20.06.2015
comment
Вы просто добавляете строки .carousel-inner › .item › img, .carousel-inner › .item › a ​​› img в загрузочный css вместо того, чтобы иметь в голове или в main.css - person RicPurcell; 21.06.2015
comment
Извините, что я ВСЕ ЕЩЕ задаю вопросы, но просто чтобы убедиться, как мне добавить это в загрузочный css? Это ссылка. Или я просто иду в ‹section›, потому что именно туда я помещаю это, и просто помещаю это так: ‹section› ‹style› .carousel-inner › .item› img ‹/style› ‹section› ? Спасибо еще раз. - person TechWiz77; 21.06.2015
comment
О, ты не скачал? если вы перейдете по ссылке, которую я дал вам в браузере, и загрузите ее, и вы сможете отредактировать файл и добавить в него то, что вам нужно, вы также можете добавить свое содержимое main.css в один и тот же файл вместо двух отдельных файлов css - person RicPurcell; 21.06.2015
comment
О, так это загрузка! Ладно, вижу, сейчас скачаю и скоро к вам вернусь! - person TechWiz77; 24.06.2015

Какое слайд-шоу вы ищете? В настоящее время я создаю его с помощью jquery и php.

предварительный просмотр слайд-шоу можно найти по адресу http://rbgraphix.co.uk/gallery/display/New/slideshow.php

на данный момент это не автоматически, но я делаю это таким образом, а также имею страницу загрузки /upload.php и страницу удаления (в настоящее время в кодировании (для пользователей-администраторов)

person RicPurcell    schedule 16.06.2015
comment
Привет, я хотел бы слайд-шоу, которое просто зацикливается и все. Я рассмотрю все разные ответы, большое спасибо. - person TechWiz77; 16.06.2015
comment
Приветствую вас! Я считаю, что вы можете сделать это с помощью карусели начальной загрузки, просто удалите элементы управления ‹! -- Левый и правый --› Я, вероятно, буду использовать это, чтобы сделать мое автоматическое скольжение только без кнопок боковой панели, поскольку я хочу интегрировать их отдельно с мой дизайн будет пытаться после создания страницы удаления - person RicPurcell; 16.06.2015