Tạo Slideshow ảnh đơn giản với Jquery(1) - 18 November 2011 - Thủ thuật - Đừng Sợ Ma
Thứ năm, 2017-01-19, 4:46 PM
Chào mừng Khách | RSS
Trang chủ | Thủ thuật | Đăng kí | Đăng nhập
Về trang chủ
DUNGSOMA
XE
Ảnh
Bảo Trân rạng ngời với gu đen - trắng
Ngọc Trinh mặc bikini trên tạp chí Thái
Tạo lời chào khi khởi động Window (Trước Welcome)
Cách cài idm cho firefox 4 dễ dàng
XE
N
Bình luận mới
барабаны скачать торрент ...

астрал скачать бесплатно ...

Tìm kiếm
Liên kết
Blog FD
Vinh's info
BlOg Namkna
Xây nhà nhỏ
Kiếm tiền trên mạng
Game di dong
Tai game mien phi
Đặt liên kết>>
Thống kê

Tổng số người đang online: 1
Khách online: 1
Thành viên online: 0
dungsoma
Trang chủ » 2011 » Tháng 11 » 18 » Tạo Slideshow ảnh đơn giản với Jquery(1)
Bấm LIKE để nhận thủ thuật mới nhất
1:39 PM
Tạo Slideshow ảnh đơn giản với Jquery(1)
Bạn đã biết tới rất nhiều plugin của jQuery cho phép bạn tạo các slideshow với nhiều hiệu ứng đẹp, chuyên nghiệp. Cách sử dụng cũng dễ dàng, thậm chí không cần biết viết mã javascript. Nhưng nếu bạn muốn học cách viết một slideshow của riêng mình thì bài viết này dành cho bạn, bài hướng dẫn làm slideshow dạng đơn giản nhất với jQuery.



Bạn paste vào nơi muốn hiển thị: Sử lại nếu bạn muốn:


<link rel="stylesheet" type="text/css" href="http://dungsoma.dmon.com/Thuthuat/taosilde1/1css.css" /> 

 <script type="text/javascript" src="http://dungsoma.dmon.com/Thuthuat/taosilde1/1js.js"></script> 

<script type="text/javascript" src="http://dungsoma.dmon.com/Thuthuat/taosilde1/2js.js"></script> 

<script type="text/javascript" src="http://dungsoma.dmon.com/Thuthuat/taosilde1/3js.js"></script> 

<script type="text/javascript" src="http://dungsoma.dmon.com/Thuthuat/taosilde1/4js.js"></script> 

<script type="text/javascript"> 

var theInt = null;

var $crosslink, $navthumb;

var curclicked = 0;

theInterval = function(cur){

clearInterval(theInt);

if( typeof cur != 'undefined' )

curclicked = cur;

$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

theInt = setInterval(function(){

$crosslink.removeClass("active-thumb");

$navthumb.eq(curclicked).parent().addClass("active-thumb");

$(".stripNav ul li a").eq(curclicked).trigger('click');

curclicked++;

if( 6 == curclicked )

curclicked = 0;

}, 3000);

};

$(function(){

$("#main-photo-slider").codaSlider();

$navthumb = $(".nav-thumb");

$crosslink = $(".cross-link");

$navthumb

.click(function() {

var $this = $(this);

theInterval($this.parent().attr('href').slice(1) - 1);

return false;

});

theInterval();

});

</script> 



<div id="page-wrap"> 

<div class="slider-wrap"> 

<div id="main-photo-slider" class="csw"> 

<div class="panelContainer"> 

<div class="panel" title="Panel 1"> <div class="wrapper"> <img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/1.jpg" alt="temp" 

height="282" width="420" /> <div class="photo-meta-data">Title 1<br /> <span>Nội dung 1</span> </div> </div> </div> 
<div class="panel" title="Panel 2"> <div class="wrapper"> <img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/2.jpg" alt="temp" height="282" width="420" /> <div class="photo-meta-data">Title 2<br />  <span>Nội dung 2</span>  </div> </div> </div> 

<div class="panel" title="Panel 3"> <div class="wrapper"> <img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/3.jpg" alt="scotch egg" class="floatLeft" // ảnh 3.jpg ở bên trái height="282" width="420"/> <h1>Title 3</h1> <ul>Nội dung 3</ul> </div> </div> 

<div class="panel" title="Panel 4"> <div class="wrapper"> <img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/4.jpg" alt="temp" height="282" width="420" /> <div class="photo-meta-data">Title 4<br /> <span>Nội dung 4</span> </div> </div> </div> 

<div class="panel" title="Panel 5"> <div class="wrapper"> <img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/5.jpg" alt="temp" height="282" width="420" /> <div class="photo-meta-data">Title 5<br />  <span>Nội dung 5</span> </div> </div> 

</div> <div class="panel" title="Panel 6"> <div class="wrapper"> <img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/6.jpg" alt="temp" height="282" width="420" /><h1>Title 6</h1> <blockquote>Nội dung 6</blockquote> </div> </div> 

 </div> </div> 
 <a href="#1" class="cross-link active-thumb"><img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/1.jpg" class="nav-thumb" alt="temp-thumb" width="60" height="40"/></a> 

<div id="movers-row"> 

<div><a href="#2" class="cross-link"><img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/2.jpg" class="nav-thumb" alt="temp-thumb" width="60" height="40"/></a></div> 

<div><a href="#3" class="cross-link"><img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/3.jpg" class="nav-thumb" alt="temp-thumb" width="60" height="40"/></a></div> 

<div><a href="#4" class="cross-link"><img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/4.jpg" class="nav-thumb" alt="temp-thumb" width="60" height="40"/></a></div> 

<div><a href="#5" class="cross-link"><img src="http://www.dungsoma.tk/GIAODIEN/CSS/anhdep/linkanh/5.jpg" class="nav-thumb" alt="temp-thumb" width="60" height="40"/></a></div> 

<div><a href="#6" class="cross-link"><img src="http://dungsoma.dmon.com/GIAODIEN/CSS/anhdep/linkanh/6.jpg" class="nav-thumb" alt="temp-thumb" width="60" height="40"/></a></div> 

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


Thể loại: Thiết kế website | Lượt xem: 899 | Người gởi: admin | Đánh giá: 5.0/3
Tông số bình luận: 0
Chỉ thành viên mới được bình luận
[ Đăng kí | Đăng nhập ]
Thiết kế bởi: nguoichonggia8311 2011-2017 Powered by uCoz