Mạch Khóa Số Điện Tử Mạch Đếm Sản Phẩm Mạch Đèn giao thông Ngã Tư Mạch Trái Tim Final Mạch Trái Tim Final Mạch Trái Tim I Love U

August 25, 2013

Code tạo slide ảnh chạy ngang

Bạn đang có website và muốn làm một số hiệu ứng chay website thêm sinh động.

Tuy nhiên ảnh flash thường làm cho website của bạn chậm hơn, load lâu. Ở bài viết này mình hướng dẫn các bạn tạo một slide ảnh chạy ngang website. Hiệu ứng đơn giản đẹp mắt, dễ load và đặc biệt rất đơn giản để sử dụng

Bước 1: Chuẩn bị các ảnh có kích thước bằng nhau:



Bước 2: Up ảnh lên site của mình để lấy link ảnh:

Trong quản trị vào Nội dung >> Quản lý ảnh >> chọn Images để up ảnh 

Sau khi up xong click chuột phải vào ảnh để Xem ảnh và copy link:


Bước 3: Thay link website, và link ảnh vào đoạn code sau:

<div class="Modul_nd">
<div class="chuyenmuc">
<style type="text/css">
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 960;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
} </style>
<div id="demo">
<div id="indemo">
<div id="demo1">
       <a href="http://myphamxachtayus.com/trang-diem/166757.html"><img alt="" src="http://myphamxachtayus.bizwebvietnam.com/Sites/10054/Data/images/111.jpg" style="width: 272px; height: 185px;" /></a><a href="http://myphamxachtayus.com/duong-da/166756.html"><img alt="" src="http://myphamxachtayus.bizwebvietnam.com/Sites/10054/Data/images/112.jpg" style="width: 220px; height: 185px;" /></a><a href="http://myphamxachtayus.com/clinique/166367.html"><img alt="" src="http://myphamxachtayus.bizwebvietnam.com/Sites/10054/Data/images/113.jpg" style="width: 220px; height: 185px;" /></a><a href="http://myphamxachtayus.com/trang-diem/166757.html"><img alt="" src="http://myphamxachtayus.bizwebvietnam.com/Sites/10054/Data/images/114.jpg" style="width: 240px; height: 185px;" /></a></div>
<div id="demo2">
<a href="http://myphamxachtayus.com/estee-lauder/166368.html"><img alt="" src="http://myphamxachtayus.bizwebvietnam.com/Sites/10054/Data/images/115.jpg" style="width: 254px; height: 185px;" /></a></div>
</div>
</div>
<script>
var speed = 40; 
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
function Marquee() {
if (tab2.offsetWidth - tab.scrollLeft <= 0)
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
tab.onmouseover = function() { clearInterval(MyMar) };
tab.onmouseout = function() { MyMar = setInterval(Marquee, speed) };
</script> </div>
</div>

Trong đó tất cả chỗ nào có:

<a href: Thay link liên kết website

img alt="" src="Thay link ảnh"

var speed: điều chỉnh tốc độ chạy của slide ảnh

Bước 4: Sau khi đã chỉnh sửa thay link xong, bạn thêm mới module text/htlm, và copy code và module.

Ấn Lưu hoặc Cập nhật 

Sau đó bạn có thể Xem website để xem thành quả của mình.

Chúc các bạn thực hiện thành công.

Echipkool - Chia sẻ kiến thức - Kết nối đam mê điện tử

0 comments:

Post a Comment

Bạn đọc hãy giúp chúng tôi xây dựng cộng đồng bằng cách để lại bình luận, chúng tôi luôn đón nhận mọi ý kiến của các bạn:
» Bình luận nghiêm túc và không chứa các liên kết quảng cáo.
» Vui lòng không Spam nhận xét với mọi hình thức.
» Rất mong bạn đề tên cho nhận xét của chính mình - Bằng cách chọn vào Tên/URL và điền tên bạn vào (Phần URL có thể bỏ trống ).

- Bạn có thể chèn Link nhạc (NCT), video(Youtube),Hình ảnh vào comment bằng cú pháp:
+ [youtube] Link video Youtube [/youtube].
+ [img] Link ảnh( định dạng PNG, JPG,GIF) [/img]
+Chèn link liên kết: <a href="LINK" rel="nofollow">Name</a>
-Bạn copy mã bên cạnh biểu tượng chèn vào nhận xét để bày tỏ cảm xúc!!

:) :( :)) :(( =)) =D> :D :P