jquery div點擊輪播是一種常見的網頁輪播效果。它可以讓網頁內容更豐富,更有趣味性,也更吸引用戶的注意力。下面我們來了解一下如何使用jquery實現這個效果。
$(function() { var $carousel = $('#carousel'); // 獲取輪播的外層div var $ul = $carousel.find('ul'); // 獲取ul元素 var $li = $ul.find('li'); // 獲取li元素 var $firstLi = $li.first(); // 獲取第一張圖片元素 var width = $firstLi.width(); // 獲取圖片的寬度 var count = $li.length; // 獲取圖片數量 var currentIndex = 0; // 當前選中的圖片索引 var $prev = $carousel.find('.prev'); // 上一張按鈕 var $next = $carousel.find('.next'); // 下一張按鈕 // 初始化 $li.each(function(index) { var $this = $(this); var left = width * index; $this.css('left', left); }); // 上一張按鈕點擊事件 $prev.click(function() { currentIndex--; if (currentIndex< 0) { currentIndex = count - 1; } animate(); }); // 下一張按鈕點擊事件 $next.click(function() { currentIndex++; if (currentIndex >= count) { currentIndex = 0; } animate(); }); // 動畫效果 function animate() { $ul.stop().animate({'left': -currentIndex * width}, 500); } });
以上是實現jquery div點擊輪播的代碼。我們可以看到,首先獲取了輪播的外層div、ul、li等元素,然后初始化li元素的位置,然后分別為上一張和下一張按鈕添加點擊事件,最后添加animate函數來實現動畫效果。只需按照上面的代碼添加到網頁中即可。