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.
Diễn đàn » Tài liệu về html » Code tạo slide ảnh chạy ngang |
|
Người gửi | Nội dung |
---|---|
Tiến Anh |
Vui lòng đăng nhập để gửi phản hồi
Cải thiện tư thế của trẻ em bằng đai chống gù thông minh. gửi lúc 10-03-2022 15:08:41
Đai chống gù ở trẻ có đem lại hiệu quả. gửi lúc 07-02-2022 16:42:03
Máy máy làm sạch rau củ thiết bị bảo vệ sức khỏe cho mọi gia đình. gửi lúc 14-01-2022 16:40:48
Hướng dẫn chi tiết cách chơi tiến lên Miền Nam jessicatran gửi lúc 16-09-2021 10:43:42
Kinh nghiệm chơi bài xì tố từ các tay chơi chuyên nghiệp jessicatran gửi lúc 10-09-2021 15:37:05
Giải đáp thắc mắc: Gambling có hợp pháp không? jessicatran gửi lúc 06-09-2021 10:42:54
Hướng dẫn chi tiết cách xóc đĩa bệt jessicatran gửi lúc 31-08-2021 10:12:32
Làm thế nào để kiếm tiền với Xóc đĩa 3D trên KUBET? jessicatran gửi lúc 25-08-2021 11:42:37
Cách đoán bầu cua tôm cá bằng toán học jessicatran gửi lúc 20-08-2021 13:08:00
Cách chơi bài Baccarat tại nhà cái W88 jessicatran gửi lúc 17-08-2021 11:04:32
Top 3 game đánh bài ăn tiền thật trên điện thoại hot nhất jessicatran gửi lúc 13-08-2021 14:10:56
Cách chơi Pok Deng chuẩn Thái Lan jessicatran gửi lúc 05-08-2021 10:36:24
Làm kèo bóng đá là làm gì? nvu54876 gửi lúc 02-08-2021 23:31:24
4 GAME VIỆT HOT ĐÃ CÓ MẶT TẠI FUN88 jessicatran gửi lúc 31-07-2021 14:11:11
chia sẻ về các thuật ngữ cá độ bóng đá hiện nay nvu54876 gửi lúc 29-07-2021 23:32:50
cách làm nhà cái bóng đá cực kỳ uy tín và nhiều mô hình đã thành công nvu54876 gửi lúc 26-07-2021 23:46:32
Một số vấn đề cần lưu ý khi đánh bài phỏm 9 lá jessicatran gửi lúc 26-07-2021 18:23:08
Hướng dẫn cách đánh baccarat bịp luôn thắng và an toàn jessicatran gửi lúc 21-07-2021 16:18:02
Cách kiếm tiền từ cá độ bóng đá với nhà cái Bet365 nvu54876 gửi lúc 19-07-2021 22:40:20
Hướng dẫn đổi thưởng trên TOBET88 jessicatran gửi lúc 16-07-2021 14:55:05