.

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 on 2012-12-08, 13:43 View user profile http://www.fmvi.vn gialangsangai@yahoo.com
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 on 2012-12-09, 17:45 View user profile http://www.fmvi.vn gialangsangai@yahoo.com
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 on 2012-12-09, 18:19 View user profile http://www.fmvi.vn gialangsangai@yahoo.com
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 on 2012-12-09, 19:29 View user profile 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
#5daiqb777 on 2012-12-09, 21:41 View user profile
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 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