Update content:
1. The page structure and CSS style must be similar to the bottom placement
2. Click the left and right button to slide left and right.
3. This is typically used for multiple picture carousel use, simplifying and optimizing the code.
If due to different needs, can be self -scrollimgplus.js plug- in to the corresponding transformation.
The use of the method is not detailed, please see the source code and related notes: View demo
<!doctype Html>"Utf-8"><title> Basic Material </title><style>*{margin:0; Padding0;} body{Font-family:'Microsoft Ya-Black'; Font-size:12px; Color: #393939; Line-height:1.5;}. Clear {zoom:1;}. Clear:after {content:""; Display:block; Height0; visibility:visible; clear:both;}. abtn{width:11px; height:17px;}. aleft{Background:url (Theme_3/img/cl/left.png) no-repeat0 0; Position:absolute; Left:0; top:65px;}. aright{Background:url (Theme_3/img/cl/right.png) no-repeat0 0; Position:absolute; Right:0; top:65px;}. options{Width:98%; Margin:1%Auto;} #slide_2 {width:816px; position:relative; margin:10px 10px; Padding-right:16px;}. imglist_1{width:816px; height:200px; Overflow:hidden;}. Imglist li{float: Left; width:120px; Margin-left:16px; Display:inline; Position:relative;}. Imglist Li img{width:120px; height:159px;}. Imglist Li p{Font-size:12px; Text-Align:center; Margin:0; Line-height:10px;}</style>class="Options Jc_pic Clear"Id="slide_2"> <a id="Jc_left" class="abtn Aleft"href="#left"title="Move left"></a> <divclass="imglist_1"> <ul id="Jc_picul" class="Imglist Clear"> <li> ""Src=".. /theme_3/img/cl/example/u910.png"> <p> inspection cover </p> </li> <LI&G T ""Src=".. /theme_3/img/cl/example/u912.png"> <p> Inspection page 1</p> </li> <LI&G T ""Src=".. /theme_3/img/cl/example/u916.jpg"> <p> Inspection page 2</p> </li> <LI&G T ""Src=".. /theme_3/img/cl/example/u910.png"> <p> inspection cover </p> </li> <LI&G T ""Src=".. /theme_3/img/cl/example/u912.png"> <p> Inspection page 3</p> </li> <LI&G T ""Src=".. /theme_3/img/cl/example/u916.jpg"> <p> Inspection page 4</p> </li> <LI&G T ""Src=".. /theme_3/img/cl/example/u910.png"> <p> Inspection page 5</p> </li> <LI&G T ""Src=".. /theme_3/img/cl/example/u912.png"> <p> Inspection page 6</p> </li> <LI&G T ""Src=".. /theme_3/img/cl/example/u916.jpg"> <p> Inspection page 7</p> </li> </ul> </div> <a id="Jc_right" class="abtn aright"href="#right"title="Move Right"></a> </div> </div> <script type="Text/javascript"Src="Theme_3/js/jquery-1.8.3.min.js"></script> <script src="Theme_3/js/addscrolljs.js"></script> <script>$ (function () {Doaddscroll ($ ("#slide_2"),0,6); }) </script> </body>jquery Picture Carousel-Plugins