Use jQuery to simply implement the image display function (sample code)

Recently, I want to present a product. Because there are many products that cannot be displayed on a single screen, it is not easy to find a few items on the Internet, in the end, you can only write it by yourself.

The effect is as follows:



Simple principle:The override of CSS in the area to be rolled is set to hidden, and the width is set to a relatively large value, such as PX. Each time you click the previous or next page, the current page number is calculated, if the last page is reached, return to the first page. Scroll is implemented by controlling the left attribute of the div. two divs are required. The position of the outer divs is set to retative, set the position of the DIV to absolute.

The main code is as follows:

HTML:
Copy codeThe Code is as follows:
<Div id = "product">
<H2> <span class = "arrow"> arrow </span> product display <Span class = "prev"> </span>
<Div id = "content">
<Div id = "content_list">
<Dl>
<Dt> </dt>
<Dd> data collection mobile terminal </dd>
</Dl>
<Dl>
<Dt> </dt>
<Dd> data collection mobile terminal </dd>
</Dl>
<Dl>
<Dt> </dt>
<Dd> data collection mobile terminal </dd>
</Dl>
<Dl>
<Dt> </dt>
<Dd> data collection mobile terminal </dd>
</Dl>
<Dl>
<Dt> </dt>
<Dd> data collection Mobile Terminal 1 </dd>
</Dl>
<Dl>
<Dt> </dt>
<Dd> data collection Mobile Terminal 1 </dd>
</Dl>
<Dl>
<Dt> </dt>
<Dd> data collection Mobile Terminal 1 </dd>
</Dl>
</Div>
</Div>
<Span class = "next"> </span>
</Div>

CSS:
Copy codeThe Code is as follows:
# Product {
Width: 720px;
Height: 200px;
Border: 1px solid # ccc;
Margin: 0 5px 5px 0;
Float: left;
}
# Product div # content {
Position: relative;
Width: 690px;
Height: 160px;
Display: inline-block;
Overflow: hidden;
Float: left;
}
# Product div # content_list {
Position: absolute;
Width: 4000px;
}
# Product dl {
Width: 160px;
Height: 150px;
Float: left;
Margin: 10px 4px;
Padding: 2px 2px;
}
# Product dl: hover {
Border: 1px solid #333;
Background: # ccc;
}
# Product dl dt {

}
# Product dl dt img {
Width: 160px;
Height: 120px;
Border: none;
}
# Product dl dd {
Text-align: center;
}
# Product span. prev {
Cursor: pointer;
Display: inline-block;
Width: 15px;
Height: 150px;
Background: url (../images/arrow_l.gif) no-repeat left center;
Float: left;
}
# Product span. next {
Cursor: pointer;
Display: inline-block;
Width: 15px;
Height: 150px;
Background: url (../images/arrow_r.gif) no-repeat left center;
Float: right;
}

Js Code
Copy codeThe Code is as follows:
$ (Function (){
Var page = 1;
Var I = 4; // four images per version
// Backward button
$ ("Span. next"). click (function () {// bind a click event
Var content = $ ("div # content ");
Var content_list = $ ("div # content_list ");
Var v_width = content. width ();
Var len = content. find ("dl"). length;
Var page_count = Math. ceil (len/I); // if it is not an integer, the smallest integer is obtained in the greater direction.
If (! Content_list.is (": animated") {// determines whether the "content display area" is being animated.
If (page = page_count) {// you have reached the last page. if you want to move back, you must jump to the first page.
Content_list.animate ({left: '0px '}, "slow"); // you can jump to the first page by changing the left value.
Page = 1;
} Else {
Content_list.animate ({left: '-=' + v_width}, "slow"); // you can change the left value to change the layout each time.
Page ++;
}
}
});
// Forward button
$ ("Span. prev"). click (function (){
Var content = $ ("div # content ");
Var content_list = $ ("div # content_list ");
Var v_width = content. width ();
Var len = content. find ("dl"). length;
Var page_count = Math. ceil (len/I); // if it is not an integer, the smallest integer is obtained in the greater direction.
If (! Content_list.is (": animated") {// determines whether the "content display area" is being animated.
If (page = 1) {// it has reached the first layout. if you move forward, you must jump to the last layout.
Content_list.animate ({left: '-=' + v_width * (page_count-1)}, "slow ");
Page = page_count;
} Else {
Content_list.animate ({left: '+ =' + v_width}, "slow ");
Page --;
}
}
});
});