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 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.
0 nhận xét