Rumah  >  Artikel  >  hujung hadapan web  >  contoh pelaksanaan js mengklik butang kiri dan kanan untuk memutarkan kemahiran pictures_javascript

contoh pelaksanaan js mengklik butang kiri dan kanan untuk memutarkan kemahiran pictures_javascript

WBOY
WBOYasal
2016-05-16 16:17:071315semak imbas

Contoh dalam artikel ini menerangkan kaedah js untuk mencapai kesan mengklik butang kiri dan kanan untuk memutar imej. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

$(function () { 
  var index = 1; 
  var pPage = 1; 
  var $v_citemss = $(".citemss"); 
  var $v_show = $v_citemss.find("ul"); 
  v_width = $v_citemss.width();//图片展示区外围div的大小 
 
  //注:若为整数,前边不能再加var,否则会被提示underfine 
  p_count = $v_citemss.find("li").length;//获取此处li的个数 
  $(".slideprev1").click(function () { 
    if (!$v_show.is(":animated")) { 
      if (pPage == index) { 
        $v_show.animate({ right: '0px' }, "3000"); 
        pPage = 4; 
      } else { 
        $v_show.animate({right: '-=' + v_width },"3000"); 
        pPage--; 
      } 
    } 
  }); 
 
  $(".slidenext").click(function () { 
    if (!$v_show.is(":animated")) { 
      if (pPage == p_count) { 
        $v_show.animate({ left: '0px' }, "3000"); 
        pPage = 1; 
      } else { 
        $v_show.animate({ left: '-=' + v_width }, "3000"); 
        pPage++; 
      } 
    } 
  }); 
});

Untuk kesan seperti melayang tetikus, penerangan bar mendatar akan muncul di bawah, dan butang akan muncul di kiri dan kanan, ia boleh dicapai sepenuhnya dengan css, dan tidak perlu menggunakan js untuk mencapainya.

Operasi khusus: Dalam kedudukan mutlak atau relatif dalam CSS, kiri, kanan atau bawah ialah nombor negatif Selepas menuding tetikus, ia akan dipaparkan dengan betul, dan kemudian menetapkan peralihan sebagai penimbal untuk animasi.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn