Rumah > hujung hadapan web > tutorial js > 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
Lepaskan: 2016-05-16 16:17:07
asal
1365 orang telah melayarinya

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++; 
      } 
    } 
  }); 
});
Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan