« »

Một hiệu ứng JavaScript đơn giản sử dụng thư viện jQuery để thực hiện việc thay đổi ảnh liên tục. Hiệu ứng mờ dần được sử dụng để hiển thị giữa các ảnh, bạn có thể dễ dàng thay đổi các hoạt hóa của hiệu ứng này với các hàm có sẵn của jQuery.

Nhãn: JavaScript chuyển ảnh, chuyển ảnh đơn giản, thay đổi ảnh, hiệu ứng mờ dần, hoạt hóa

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Tạo video bằng AI chỉ với giọng nói hoặc văn bản

Ứng dụng video AI MIỄN PHÍ hàng đầu của bạn! Tự động hóa video AI đầu tiên của bạn. Tạo Video Chuyên Nghiệp Của Bạn Trong 5 Phút Bằng AI Không Cần Thiết Bị Hoặc Kỹ Năng Chỉnh Sửa Video. Sản xuất video dễ dàng dành cho nhà tiếp thị nội dung. Ứng dụng video AI KHÔNG GIỚI HẠN miễn phí trong tay bạn

Mã nguồn
Files
CSS
JavaScript
HTML
In

Copy All x2

<style type="text/css">
/* rotator in-page placement */
    div#rotator {
	position:relative;
	height:345px;
	margin-left: 15px;
}
/* rotator css */
	div#rotator ul li {
	float:left;
	position:absolute;
	list-style: none;
}
/* rotator image style */	
	div#rotator ul li img {
	border:1px solid #ccc;
	padding: 4px;
	background: #FFF;
}
    div#rotator ul li.show {
	z-index:500
}
</style>

Copy All x2

<script type="text/javascript" src="/javascript/jquery.js"></script>

<!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">

function theRotator() {
	//Set the opacity of all images to 0
	$('div#rotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotator ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',6000);
	
}

function rotate() {	
	//Get the first image
	var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};

$(document).ready(function() {		
	//Load the slideshow
	theRotator();
});

</script>

Copy All x2

<div id="rotator">
  <ul>
    <li class="show"><a href="http://www.alohatechsupport.net/webdesignmaui/"><img src="image-1.jpg" width="500" height="313"  alt="pic1" /></a></li>
    <li><a href="http://www.alohatechsupport.net/"><img src="image-2.jpg" width="500" height="313"  alt="pic2" /></a></li>
    <li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="image-3.jpg" width="500" height="313"  alt="pic3" /></a></li>

    <li><a href="http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html"><img src="image-4.jpg" width="500" height="313"  alt="pic4" /></a></li>
  </ul>
</div>

Lời bình (1)
Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

11/03/2011
Dylan Wagstaff [more]
24,234
1
0
0
0.12 KBytes

JavaScript chuyển ảnh đơn giản với jQuery - Ngôn ngữ: tiếng Việt

0/5 0 lượt đánh giá / 24,234 lượt xem / 1 lời bình 11/03/2011 Một hiệu ứng JavaScript đơn giản sử dụng thư viện jQuery để thực hiện việc thay đổi ảnh l...JavaScript chuyển ảnh đơn giản với jQuery - JavaScript chuyển ảnh đơn giản với jQuery - Ngôn ngữ: tiếng Việt

Hãy là thành viên đầu tiên làm điều này

lehoangchieu