Trình diễn JavaScript/HTML đơn giản

Question

Mới đối với Javascript, nhưng sau một số nghiên cứu, nó loks như thế này sẽ là phương pháp tốt nhất trong việc triển khai kết quả mong muốn của tôi. Tôi đang cố gắng tạo trình chiếu hình ảnh (5 hình ảnh được chọn trước) tự động thay đổi trong khoảng thời gian 5 giây. Bất cứ ai có thể hướng tới một hướng dẫn hoặc hướng dẫn tôi trong quá trình này? Bất kỳ giúp đỡ được rất nhiều đánh giá cao.

Answer 1

Plugin trình chiếu jQuery thực sự tốt đẹp là http://www.devtrix.net/sliderman/ Nó có nhiều chuyển đổi khác nhau giữa các trang trình bày và rất dễ sử dụng.

Có rất nhiều thứ ở đó, do đó, tìm kiếm nhanh trên Google về "Trình chiếu jQuery" sẽ tạo ra hàng trăm kết quả.

Answer 2

Chỉ cần google cho thanh trượt nội dung javascript

Dưới đây là 350 hình ảnh và nội dung thanh trượt:

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

và đây là 25 hơn:

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

Answer 3

Dưới đây là một mã Rất đơn giản để tạo đơn giản slideshow Javascript/HTML chỉ bằng cách sử dụng đơn giản mã JavaScript và 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" /> 

Answer 4

Hiện có hàng ngàn ví dụ, một số rất phức tạp và tinh vi. Các difficoult, thay vào đó, là để tìm một dễ hiểu cho người mới bắt đầu.

Sau một số nghiên cứu tôi đã tìm thấy điều này từ css-tricks. (Sử dụng jquery cũng).

Answer 5

Tôi biết đây là một bài đăng cũ nhưng tôi mặc dù tôi sẽ chia sẻ hướng dẫn của tôi, vì lợi ích của bất kỳ ai gặp phải câu hỏi này trong tương lai.

Simple Slideshow

Hy vọng điều này sẽ giúp ai đó. Trình chiếu đơn giản và cơ bản của nó dễ xây dựng/triển khai.

Chỉ Trong trường hợp liên kết trở thành hợp lệ ở đây là mã: Giai đoạn đầu tiên là thiết lập html như sau:

<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> --> 

Tiếp theo chúng ta sẽ viết CSS, đó là như sau:

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; } 

Như bạn có thể thấy không có gì thú vị hoặc phức tạp về CSS này. Trên thực tế, nó không trở nên cơ bản hơn, nhưng tôi hứa đó là tất cả những gì cần thiết.

Tiếp theo chúng ta sẽ tạo ra 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) }); 
} 

});