Computer Tips

Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot

Hình mô tả Slideshow

#slider{ width:660px;height:275px;position:relative;overflow:hidden;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;box-shadow:0 0 6px #000}
#mask-gallery{overflow:hidden}
#gallery{list-style:none;margin:0;padding:0;z-index:0;width:900px;overflow:hidden}
#gallery li{float:left}
#mask-excerpt{position:absolute;top:0;left:0;z-index:500;width:100px;overflow:hidden}
#excerpt{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;list-style:none;margin:0;padding:0;z-index:10;position:absolute;top:0;left:0;width:100px;background-color:#000;overflow:hidden;font-family:arial;font-size:14px;color:#fff}
#excerpt li{padding:5px}
.clear{clear:both}
#btn-prev{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-prev:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-prev:active{border-top-color:#238acf;background:#238acf}
#btn-next{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-next:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-next:active{border-top-color:#238acf;background:#238acf}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://traidatmuidata.googlecode.com/files/jquery.scrollTo.js"></script>
<script>/* <![CDATA[ */
$(document).ready(function() {
var speed = 5000; // Tốc độ trình diễn$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
var run = setInterval('newsscoller(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});
$('#btn-next').click(function () {
newsscoller(0);
return false;
});
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed); });});
function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
if (prev) {
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800); }
/* ]]> */</script>
6. Save template lại và vào Bố cục (Layout)7. Thêm 1 HTML/Javascript và thêm vào code bên dưới<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSRLjBF958_l4Nx18yzCTppWZBBojWxhb7zdWeBm0f1ejF5X1Gt7RQviN5yl4dRS5Ge1VX_v3XYe4nCw6Tj431P9LE8h1A3KnHc-Ry8Z2JydHmzyjOIHOAkeRH4Mv3rCzIp8UQlO1ExLJ/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI9EU-sOe-FRGl2akqaTkneBM665TBavGCwUUHHoUqk6mCf0dekpRUku6dDxxEgPDsyNvOqoKqBG7xr8GvXoDBtPWNj43Wh-icxSNtIO75GRH6cG-eeuh-5HmxaGDY-Lapz13KqVweOVd-/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFV8_uU4Xp3ckMDWd8biX6MQltIDLDmu9Nw7E4_pfTbvyVlLXPr_G3sXmmPselwZy9MOfYRIR_qyEIamZWUdizSYFOuhkWNI5L8XDEuN-5-AROt27gvtcOw2aIOMA2WLTZY-bkX_8EHeU0/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOIgD1NbOnfi4cj52Mx8DzKy36H7uQSzmNdxj15s90HsEIOu3Tw8wuoYbvaN-3mruDbvISgJg3YEBmzckvhg07xbg5vBUa30Hew-cEvFz_Oj9dZWzUYDOwF65yy0t8PSJ9DoB0LtCPf49/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCh_DodQ7cW5TMbp92VvHf7VKYvf6oB56J1oO9tqrWiTt9BQahZljp9IH0imgpXrHpima-ZQH-I7qn1Sah-dAozLuhuD6Pf-ZxOW1nCH2aYcdAHiHbW7QRD5o1M0r5SZpNc-NyG9J3Q-A/s515/2.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
<li>Nội dung thông tin mô tả cho hình ảnh 1. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 2. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 3. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 4. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 5. </li>
</ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a> <a href="#" id="btn-next">next</a></div>

Author: Hamedledam

Sửa chữa và bảo trì máy tính, quản trị hệ thống mạng doanh nghiệp.Cung cấp các giải pháp ứng dụng CNTT - Thiết kế, quản trị website.