web-dev-qa-db-ja.com

シンプルなJavaScript / HTMLスライドショー

JavaScriptは初めてですが、いくつかの調査の結果、このような方法が望ましい出力を実装するための最良の方法になります。 5秒間隔で自動的に変化する画像（事前に選択された5つの画像）のスライドショーを作成しようとしています。誰かがチュートリアルに向けたり、このプロセスを案内してくれますか？どんな助けでも大歓迎です。

javascripthtmlsliderslideshowuislider
8
TopChef

本当に素晴らしいjQueryスライドショータイプのプラグインはこれです http://www.devtrix.net/sliderman/ スライド間に多くの異なるトランジションがあり、本当に使いやすいです。

世の中にはたくさんあるので、「jQuery Slideshow」をグーグルで検索すると、何百もの結果が得られます。

6
Tim B James

以下は、単純なJavaScriptおよびHTMLコードを使用するだけで単純なJavaScript/HTMLスライドショーを作成するための非常に単純なコードです。

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() 
{ 
document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; 
setTimeout("swapImage()",3000); 
} 
window.onload=swapImage; 
</script> 
<img height="200" name="slide" src="image_1.gif" width="400" />
11
shuseel

Javascriptコンテンツスライダーのグーグル

ここに350の画像とコンテンツスライダーがあります：

http://www.jqueryrain.com/example/jquery-slider-slideshow/

そしてここにさらに25があります：

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/ 。

4
Michael Durrant

何千もの例があり、いくつかは非常に複雑で洗練されています。難しいのは、初心者にとってわかりやすいものを見つけることです。

いくつかの調査の後、私はこれを css-tricks から見つけました。 （jqueryも使用します）。

3
T30

私はこれが古い投稿であることを知っていますが、将来この質問に遭遇した人のために、チュートリアルを共有します。

シンプルなスライドショー

これが誰かを助けることを願っています。構築/実装が簡単な、非常にシンプルで基本的なスライドショーです。

リンクが無効になる場合のコードは次のとおりです。最初の段階は、次のようにHTMLを設定することです。

<div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
 <img src="”img1.png”/">
 <div class="slideText">
 <h2>The Slide Title</h2> 
 <p>This is the slide text</p>
 </div> <!-- </slideText> -->
 </div> <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

次に、次のようなCSSを記述します。

img {
 display: block;
 width: 100%;
 height: auto;
}
p{
 background:none;
 color:#ffffff;
}
#slideShow #slideShowWindow {
 width: 650px;
 height: 450px;
 margin: 0;
 padding: 0;
 position: relative;
 overflow:hidden;
 margin-left: auto;
 margin-right:auto;
}

#slideShow #slideShowWindow .slide {
 margin: 0;
 padding: 0;
 width: 650px;
 height: 450px;
 float: left;
 position: relative;
 margin-left:auto;
 margin-right: auto;
 }

#slideshow #slideshowWindow .slide, .slideText {
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
} 
.slideText {
 background: rgba(128, 128, 128, 0.49);
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
 display: block;
 text-indent: -10000px;
 position: absolute;
 cursor: pointer;
}
#leftNav {
 left: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_minus.png");
 background-repeat: no-repeat;
 z-index: 10;
}
#rightNav {
 right: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_green.png");
 background-repeat: no-repeat;
 z-index: 10; }

ご覧のように、このCSSにはエキサイティングなものや複雑なものはありません。実際、基本的なものにはなりませんが、必要なのはそれだけです。

次に、jQueryを作成します。

$(document).ready(function () {

 var currentPosition = 0;
 var slideWidth = 650;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 var slideShowInterval;
 var speed = 3000;

 //Assign a timer, so it will run periodically
 slideShowInterval = setInterval(changePosition, speed);

 slides.wrapAll('<div id="slidesHolder"></div>');

 slides.css({ 'float': 'left' });

 //set #slidesHolder width equal to the total width of all the slides
 $('#slidesHolder').css('width', slideWidth * numberOfSlides);

 $('#slideShowWindow')
 .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
 .append('<span class="slideNav" id="rightNav">Move Right</span>');

 manageNav(currentPosition);

 //tell the buttons what to do when clicked
 $('.slideNav').bind('click', function () {

 //determine new position
 currentPosition = ($(this).attr('id') === 'rightNav')
 ? currentPosition + 1 : currentPosition - 1;

 //hide/show controls
 manageNav(currentPosition);
 clearInterval(slideShowInterval);
 slideShowInterval = setInterval(changePosition, speed);
 moveSlide();
 });

 function manageNav(position) {
 //hide left arrow if position is first slide
 if (position === 0) {
 $('#leftNav').hide();
 }
 else {
 $('#leftNav').show();
 }
 //hide right arrow is slide position is last slide
 if (position === numberOfSlides - 1) {
 $('#rightNav').hide();
 }
 else {
 $('#rightNav').show();
 }
 }


 //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
 function changePosition() {
 if (currentPosition === numberOfSlides - 1) {
 currentPosition = 0;
 manageNav(currentPosition);
 } else {
 currentPosition++;
 manageNav(currentPosition);
 }
 moveSlide();
 }


 //moveSlide: this function moves the slide 
 function moveSlide() {
 $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
 }

});
1
M_Griffiths