Left and right scrolling implementation code based on jQuery_jquery

two divs.
A div has a fixed width. Embed a div in the secondary div, this is the data column.

Copy code The code is as follows:

• data2


• data2

< ;li>Data2

• Data2


• Data2


• Data2

Move right
Move left
stylesheet
.box{
float: left;
height: 93px;
width: 560px;
left:0px ;
white-space:nowrap;
overflow:hidden;
position:relative /* Content cannot be hidden in ie7 without adding secondary attributes*/
}
.box-li{
float: left;
height: 90px;
left:0px;
position:relative;
white-space:nowrap;
clear: both;
}
.box-li ul{
width:100000px; /* The data in IE will automatically wrap without adding times data*/
white-space:nowrap;
}
.box-li li{
margin-left:0px;
margin-right:0px;
float: left;
text-align:center;
width: 92px;
}
$(function () {
var $cur = 1; //Initialize the displayed page
var $i= 6; //Number of displays per page
var $len = $('.box-li>ul> li').length; //Calculate the total length of the list (number)
var $pagecount = Math.ceil($len / $i); //Calculate the number of display pages
var $showbox = $(' .box');
var $w = $('.box').width(); //Get the peripheral width of the display area
var $pre = $('#pre');
var $next = $('#next');
//Scroll forward
$pre.click(function () {
if (!$showbox.is(':animated')) { / /Determine whether the display area is animated
if ($cur == 1) { //On the first page, scrolling forward has no action}
else {
$showbox.animate({
left: ' =' $w
}, 600); //Change the left value and switch the display layout
$cur--; //The layout decreases
}
}
} );
//Scroll backward
$next.click(function () {
if (!$showbox.is(':animated')) { //Determine whether the display area is animated
if ($cur == $pagecount) { //On the last page, scrolling backward has no action}
else {
$showbox.animate({
left: '-=' $w
}, 600); //Change the left value and switch the display layout
$cur; //The number of layouts is accumulated
}
}
});
});

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use regular expressions in JavaScript to match multiple items and obtain the grouped data in each item_javascript skillsNext article：Use regular expressions in JavaScript to match multiple items and obtain the grouped data in each item_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills