jquery_jqueryをベースに左右ボタンクリックによる画像の横スクロールを実装します。

左右のボタンをクリックして、jquery で画像を水平にスクロールします。画像のスクロールが完了すると、自動的に最初のページに戻ります。
効果の画像は次のとおりです:

コードをコピー コードは次のとおりです:

< ;!DOCTYPE html>




< ;script type="text/javascript">
$(function(){
var page= 1;
var i = 4;//1 ページに 4 つの画像
//右にスクロール
$(".next").click(function(){ //イベントをクリック
var v_wrap = $ (this).parents(".scroll"); // 現在クリックされている要素に基づいて取得されます 親要素
var v_show = v_wrap.find(".scroll_list"); // ビデオが表示されている領域を検索します
var v_cont = v_wrap.find(".box"); //ビデオ表示領域の周辺領域を検索
var v_width = v_cont.width();
var len = v_show.find( "li").length; //私のビデオ画像の数
var page_count = Math.ceil(len/i ) //整数でない限り、大きい方向の最小の整数を取得します。 🎜>if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow");ページ =1;
}else{
v_show.animate({left:'-=' v_width},"slow");
ページ ;
}
}) ;
//左にスクロール
$(".prev").click(function(){ //イベントをクリック
var v_wrap = $(this).parents(".scroll"); //現在クリックされている要素に基づいて親要素を取得します
var v_show = v_wrap.find(".scroll_list") //ビデオ表示領域を検索します
var v_cont = v_wrap.find(".box") / /ビデオ表示領域の周辺領域を検索
var v_width = v_cont.width();
var len = v_show.find("li ").length; //ビデオ画像の数
var page_count = Math.ceil(len/i); //整数でない限り、大きい方の最小の整数を取得します
if(!v_show .is(":animated")){
if(page == 1){
v_show.animate({left:'-=' v_width*(page_count-1)},"slow"); else{
v_show.animate({left:' =' v_width},"slow");
}
});


<- 例 --> margin:0 auto;width:550px;">

• 3


• 5
  li>6


• 7


• 9
  
• 10


• 11


• 13
14 /li>

• 15

!-- "次のページ"リンク -->

html>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。