Code Tạo Slide ảnh Chạy Ngang - Tất Tần Tật Về Blogger

Thứ Bảy, 25 tháng 5, 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"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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. Người đăng: Unknown vào lúc 08:36 Gửi email bài đăng nàyBlogThis!Chia sẻ lên XChia sẻ lên FacebookChia sẻ lên Pinterest

11 nhận xét:

1. Unknownlúc 19:22 30 tháng 11, 2013

   Rất hay,cảm ơn bạ mình sẽ thử nhưng không biết thêm tiêu đề ảnh có được không

   Trả lờiXóaTrả lời
   Trả lời
2. Unknownlúc 22:39 28 tháng 11, 2014

   Thanks bạn ! Chỉnh sửa lại link ảnh rồi text phát :DDu Lịch Đà Nẵng

   Trả lờiXóaTrả lời
   Trả lời
3. Nặc danhlúc 16:30 1 tháng 3, 2015

   bài viết rất hay cảm ơn adminTải nhạc dung lượng thấptai nhac dung luong thaptải nhạc nén dung lượng

   Trả lờiXóaTrả lời
   Trả lời
4. Nặc danhlúc 16:30 1 tháng 3, 2015

   bài viết rất hay cảm ơn adminTải nhạc dung lượng thấptai nhac dung luong thaptải nhạc nén dung lượng

   Trả lờiXóaTrả lời
   Trả lời
5. Unknownlúc 09:42 12 tháng 11, 2015

   Blog của mình: http://nhahangvuonxuaphuquoc.blogspot.com/Template của blog: http://sinensis-soratemplates.blogspot.com/Các bài viết trong recentpost không hiển thị ở phần slider bên trên như template.Nhờ bạn giúp mình với.

   Trả lờiXóaTrả lời
   Trả lời
6. Unknownlúc 16:54 13 tháng 12, 2015

   Rất đẹp! Tks bạn nha :3

   Trả lờiXóaTrả lời
   Trả lời
7. Unknownlúc 15:49 22 tháng 6, 2016

   bạn ơi, hình nó bị lổi là sao bạn ơi http://carillon5tanphu.blogspot.com/

   Trả lờiXóaTrả lời
   Trả lời
8. Hằnglúc 15:42 13 tháng 1, 2017

   cảm ơn bạn

   Trả lờiXóaTrả lời
   Trả lời
9. In Uv Công Ty In Việt Advlúc 16:49 31 tháng 1, 2017

   lam bang hieu

   Trả lờiXóaTrả lời
   Trả lời
10. verschlusslúc 21:59 3 tháng 3, 2017

    cắt chữ micacắt cnc giá rẻ

    Trả lờiXóaTrả lời
    Trả lời
11. huynhinhcrlúc 22:26 8 tháng 6, 2017

    minh la new moi....KO BIET AP DUNG XONG MINH CO CHINH SUA DUOC TIEU DE SLIDE KOwww.gicvina.com

    Trả lờiXóaTrả lời
    Trả lời

Thêm nhận xétTải thêm... Bài đăng Mới hơn Trang chủ Đăng ký: Đăng Nhận xét (Atom)

CHIA SẺ LÊN MẠNG XÃ HỘI

CHÚNG TÔI TRÊN FACEBOOK

Lưu trữ Blog

• tháng 10 (1)
• tháng 8 (5)
• tháng 7 (2)
• tháng 6 (3)
• tháng 5 (2)