This article example describes how to realize the effect of clicking left and right buttons to carousel the picture. Share it for your reference. The specific implementation method is as follows:
$(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//The size of the div in the picture display area//Note: If it is an integer, var cannot be added in front, otherwise it will be prompted to be underfine p_count = $v_citemss.find("li").length;//Get the number of lis here $(".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++; } } } }); });When the mouse is suspended, horizontal bar description appears below, buttons appear on the left and right sides, etc. It can be fully implemented using CSS, and there is no need to use JS to achieve it.
Specific operation: Absolute or relative positioning in css, left, right or bottom are negative numbers. After the mouse is suspended, it will be displayed correctly respectively. Set the transition to serve as the buffer for the animation.
I hope this article will be helpful to everyone's JavaScript programming.