jQuery 제어의 예 왼쪽 및 오른쪽 화살표 스크롤링 사진 list_jquery

코드 복사 코드는 다음과 같습니다.

& lt; head & gt;
& lt; meta http-equiv = "Content-Type"컨텐츠 = "text/html; charset = gb2312"/& gt; & lt; script type = "text/javaScript"src = "js/jquery-1.7.min.js"& lt;/script & gt; & lt ; title & gt; jq 控制左右箭头滚动图片列表 & lt;/title & gt;
& lt; style type = "text/css"& gt;
*{margin : 0; 패딩 : 0; font-size : 12px;} ul {List-Style : none;} .slider {너비 : 760px; 테두리 : 1px #708090 Solid; 패딩 : 10px 20px; 높이 : 130px; 마진 : 100px Auto; 위치 : 상대; 커서 : 커서 : 포인터;}
#slider_pic {너비 : 630px; 마진 : 0 자동; 오버 플로우 : hidden; 높이 : 130px; 위치 : 상대; } <..> .prev, .next {위치 : 절대; 너비; 너비 : 20px; 높이 : 20px; 커서; 포인터; 상단 : 60px; 배경색 : #daa520; Text-Align : Center; Line-Height : 20px; font-weight : Bold; color : #fff;} .next {오른쪽 : 20px;}
.no_click {background-color : #808080;}
#slider_pic li {float : 왼쪽; 마진-오른쪽 : 10px;}
#slider_pic ul {position : 절대; 왼쪽;} 0;}
/lt;/style & gt;
& lt; script type = "text/javaScript"& gt;
$ (function () { var opic = $ ( '#slider_pic'). 찾기 ( 'ul'); var olen = oimg.length;
var oli = oimg.width ();
var prev = $ ( "#prev");
var next = $ ( "# NEXT ");
opic.width (olen*210); // 计算总长度 var inow = 0;
var itimer = null; prev.click (function () { if (inow & gt; 0) {
inow--; clickscroll ();
}) click (function () { if (inow & lt; olen-3) {
inow } clickScroll (); })
function clickScroll () {

inow == 0? prev.addclass ( 'no_click') : prev.removeClass ( 'no_click'); inow == olen-3? adddclass ( "no_click") : next.removeClass ( "no_click"); opic.animate ({왼쪽 : -inow*210})

& lt;/script & gt; & lt;/head & gt;
& lt; body & gt;
& lt; div class = "Slider"& gt; & lt ; span class = "prev no_click"id = "prev"& gt; & lt; & lt;/lt;/lt;/gt;
& lt; span class = "next"id = "next"& gt; & gt;/gt;/gt;/span & gt ;
& lt; div id = "slider_pic"& gt; & lt; ul & gt;
& lt; li & gt; & lt; img src = "http://images.jb51.net/cnblogs_com/hxh-hua/ 478335/o_01.jpg "ridth ="200 "height ="130 "/& gt;/li & gt; & lt; li & gt; & lt; img src ="http://images.jb51.net/cnblogs_com/hxh -hua/478335/o_02.jpg "width ="200 "height ="130 "/& gt;/li & gt;/li & gt;
& lt; li & gt; & lt; img src ="http://images.jb51.net/ cnblogs_com/hxh-hua/478335/o_03.jpg "width ="200 "height ="130 "/& gt; & lt;/li & gt; & lt; li & gt; & lt; img src ="http : //images.jb51 .NET/cnblogs_com/hxh-hua/478335/o_04.jpg "width ="200 "height ="130 "/& gt; & lt;/li & gt;
& lt; & lt; img src ="http : // images.jb51.net/cnblogs_com/hxh-hua/478335/o_05.jpg "width ="200 "Height ="130 "/& lt;/li & gt;

& lt;/ul & gt; & lt;/div & gt;

& lt;/div & gt;
& lt;/body & gt;
& lt;/html & gt;