.

Post new topic  Reply to topic

 » Nhóm phát triển » Thử nghiệm mods[Thử nghiệm] Mẫu slideshow dùng hàm slideToggle()You cannot reply to topics in this forum

#1admin 2012-12-08, 13:43 http://www.fmvi.vn
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanh[Thử nghiệm] Mẫu slideshow dùng hàm slideToggle()
Demo: http://www.fmvi.vn/h158-slide-slidetoggle

Code:
<style>
   #fmvislide > div:first-child {
      display: block
   }
   #fmvislide>div {
      display: none;
      line-height: 300px;
      border: 0 none;
      color: #FFFFFF;
      font-size: 50px;
      height: 300px;
      text-align: center;
   }
   #fmvislide > p {
      line-height: 16px;
   }
   #button span {
      background-color: green;
      border: 1px solid #000000;
      font-size: 7px;
      margin: 0 5px;
      padding: 0 5px;
   }
   #button span.active {
      background-color:red
   }
   #pause {
      border-color: transparent #000000;
      border-style: solid;
      border-width: 0 5px;
      float: left;
      margin: 2px 5px 2px 0;
      padding: 6px 2px;
   }
   #play {
      border-color: transparent transparent transparent rgb(0, 0, 0);
      border-style: solid;
      padding: 0px;
      margin: 2px 3px 2px 0;
      float: left;
      border-width: 6px 6px 6px 10px;
   }
   #next, #prev, #next2, #prev2 {
      border-style: solid;
      border-width: 5px 5px 0 0;
      display: inline-block;
      float: left;
      font-size: 6px;
      height: 8px;
      margin: 0 10px;
      padding: 0 4px;
      width: 0;
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
   }
   #next, #next2 {
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
   }
   #plus, #minus {
      float: left;
      font-family: cursive;
      font-size: 30px;
      margin-top: -3px;
   }
</style>
<div id="fmvislide">
      <div style="background-color: #31813A;">1</div>
      <div style="background-color: #1B94BC;">2</div>
      <div style="background-color: #8B15A2;">3</div>
      <div style="background-color: #31813A;">4</div>
      <div style="background-color: #1B94BC;">5</div>
      <div style="background-color: #8B15A2;">6</div>
      <div style="background-color: #31813A;">7</div>
      <div style="background-color: #1B94BC;">8</div>
      <div style="background-color: #8B15A2;">9</div>
      <div style="background-color: #31813A;">10</div>
</div>
<div id="button">
   <strong id="pause" style="display:none" onclick="fmvipause()"></strong>
   <strong id="play" onclick="fmviplay()"></strong>
   <strong id="prev" style="margin-top: 4px" onclick="fmviprev()"></strong>
   <strong id="next" onclick="fmvinext()" style="margin-top: -1px;"></strong>
   <strong id="plus" onclick="plus()">+</strong>
   <strong id="minus" onclick="minus()"  style="margin-top: -5px">-</strong>
</div>

<script>
   var z = n = 0,
      k = $("#fmvislide>div").length;

   $("#fmvislide>div").each(function () {
      $("#button").append('<span onclick="fmviItem(' + (n++) + ')"></span>');
      $("#button span:first").addClass("active");
   });

   function plus() {
      $("#fmvislide").append('<div style="background-color: #000;">' + (k + 1) + '</div>');
      $("#button").append('<span onclick="fmviItem(' + (k) + ')"></span>');
      k = k + 1
   }

   function minus() {
      $("#fmvislide>div:last, #button span:last").remove();
      k = k - 1
   }

   function fmviItem(a) {
      button(a);
      $("#fmvislide>div").hide();
      $("#fmvislide>div:eq(" + a + ")").show();
      z = a
   }

   function button(a) {
      $("#button span").removeClass("active");
      $("#button span:eq(" + a + ")").addClass("active");
   }

   function fmvinext() {
      if (z < k - 1) {
         $("#fmvislide>div:eq(" + (z + 1) + ")").slideToggle();
         $("#fmvislide>div:eq(" + z + ")").slideToggle();
         z = z + 1;
      } else if (z >= k - 1) {
         z = k - 1
      }
      button(z)
   }

   function fmviprev() {
      if (z > 0) {
         $("#fmvislide>div:eq(" + z + ")").slideToggle();
         $("#fmvislide>div:eq(" + (z - 1) + ")").slideToggle();
         z = z - 1;
      } else if (z <= 0) {
         z = 0
      }
      button(z)
   }

   function fmviplay() {
      z = n = 0;
      button(0);
      $("#pause, #play").toggle();
      $("#fmvislide>div").hide();
      $("#fmvislide>div:eq(0)").show();
      var fmvislide = setInterval(function () {
         if (n == 0) {
            $("#next").click();
            if (z == (k - 1)) {
               n = 1
            }
         } else if (n == 1) {
            $("#prev").click();
            if (z == 0) {
               n = 0
            }
         }
         button(z)
      }, 1000);
      $("#pause").click(function () {
         $("#pause").hide();
         $("#play").show();
         clearInterval(fmvislide)
      })
   }
</script>
#2admin 2012-12-09, 17:45 http://www.fmvi.vn
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Mẫu slideshow dùng hàm slideToggle()
Update mẫu thứ 4, bỏ luôn 3 mẫu trước cho lành.
Nếu ổn, mình sẽ thử viết nó thành plugin.
#3admin 2012-12-09, 18:19 http://www.fmvi.vn
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: Mẫu slideshow dùng hàm slideToggle()
Update + - Item
#4Vilkenv Princo 2012-12-09, 19:29 http://ganhhao.forum.st/
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: [Thử nghiệm] Mẫu slideshow dùng hàm slideToggle()
Nếu viết thành plugin thì em có ít ý kiến:

- Giao diện
- Icon
- Tỉ lệ thời gian (hình như ảnh đổi hơi bị nhanh)
- Dễ áp dụng

Cố lên nha khuynh [Thử nghiệm] Mẫu slideshow dùng hàm slideToggle() 770430076
#5daiqb777 2012-12-09, 21:41
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: [Thử nghiệm] Mẫu slideshow dùng hàm slideToggle()
Cài này để làm gì thế admin
#6Sponsored content
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: [Thử nghiệm] Mẫu slideshow dùng hàm slideToggle()

You are not connected. Please login or register

Bài cùng chuyên mục

Tìm kiếm

Tìm kiếm

Tìm theo chủ đề

Bài cùng tác giả

Tên thành viên

Chia sẻ

Chia sẽ

Bắt đầu

Sơ đồ

Sơ đồ diễn đàn

Thiết đặt

Tùy chọn

Cá nhân hóaCác hình xếpĐánh dấu đã đọcThống kê chi tiếtTình hình truy cập Trợ giúp
RSS
Thông tin
Liên hệ
Chatbox
Kiểu gõ