一.爱好选择器_原生
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> 全选练习< / title>
< / head>
< body>
< form method= "post" action= "" >
你爱好的运动是?< input type= "checkbox" id= "checkedAllBox" / > 全选/ 全不选
< br/ >
< input type= "checkbox" name= "items" value= "足球" / > 足球
< input type= "checkbox" name= "items" value= "篮球" / > 篮球
< input type= "checkbox" name= "items" value= "羽毛球" / > 羽毛球
< input type= "checkbox" name= "items" value= "乒乓球" / > 乒乓球
< br/ >
< input type= "button" id= "checkedAllBtn" value= "全 选" / >
< input type= "button" id= "checkedNoBtn" value= "全不选" / >
< input type= "button" id= "checkedRevBtn" value= "反 选" / >
< input type= "button" id= "sendBtn" value= "提 交" / >
< / form>
< script type= "text/javascript" >
window. onload = function ( ) {
var items = document. getElementsByName ( "items" ) ;
var checkedAllBtn = document. getElementById ( "checkedAllBtn" ) ;
checkedAllBtn. onclick = function ( ) {
setItemsChecked ( true ) ;
checkedAllBox. checked = true ;
} ;
var checkedNoBtn = document. getElementById ( "checkedNoBtn" ) ;
checkedNoBtn. onclick = function ( ) {
setItemsChecked ( false ) ;
checkedAllBox. checked = false ;
} ;
var checkedRevBtn = document. getElementById ( "checkedRevBtn" ) ;
checkedRevBtn. onclick = function ( ) {
setItemsChecked ( ) ;
checkedAllBox. checked = isAllChecked ( ) ;
} ;
var checkedAllBox = document. getElementById ( "checkedAllBox" ) ;
checkedAllBox. onclick = function ( ) {
setItemsChecked ( this . checked) ;
} ;
var sendBtn = document. getElementById ( "sendBtn" ) ;
sendBtn. onclick = function ( ) {
for ( var i = 0 ; i < items. length; i++ ) {
if ( items[ i] . checked) {
alert ( items[ i] . value) ;
}
}
} ;
for ( var i = 0 ; i < items. length; i++ ) {
items[ i] . onclick = function ( ) {
checkedAllBox. checked = isAllChecked ( ) ;
}
}
function isAllChecked ( ) {
for ( var j = 0 ; j < items. length; j++ ) {
if ( ! items[ j] . checked)
return false ;
}
return true ;
}
function setItemsChecked ( checked ) {
for ( var i = 0 ; i < items. length; i++ ) {
items[ i] . checked = ( checked == undefined ) ? ( ! items[ i] . checked) : checked;
}
}
}
< / script>
< / body>
< / html>
二.jQuery爱好选择器
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> 全选练习< / title>
< / head>
< body>
< form>
你爱好的运动是?< input type= "checkbox" id= "checkedAllBox" / > 全选/ 全不选
< br/ >
< input type= "checkbox" name= "items" value= "足球" / > 足球
< input type= "checkbox" name= "items" value= "篮球" / > 篮球
< input type= "checkbox" name= "items" value= "羽毛球" / > 羽毛球
< input type= "checkbox" name= "items" value= "乒乓球" / > 乒乓球
< br/ >
< input type= "button" id= "checkedAllBtn" value= "全 选" / >
< input type= "button" id= "checkedNoBtn" value= "全不选" / >
< input type= "button" id= "checkedRevBtn" value= "反 选" / >
< input type= "button" id= "sendBtn" value= "提 交" / >
< / form>
< script type= "text/javascript" src= "jquery-1.10.1.js" > < / script>
< script type= "text/javascript" >
var $checkedAllBox = $ ( '#checkedAllBox' )
var $items = $ ( ':checkbox[name=items]' )
$ ( '#checkedAllBtn' ) . click ( function ( ) {
$items. prop ( 'checked' , true )
$checkedAllBox. prop ( 'checked' , true )
} )
$ ( '#checkedNoBtn' ) . click ( function ( ) {
$items. prop ( 'checked' , false )
$checkedAllBox. prop ( 'checked' , false )
} )
$ ( '#checkedRevBtn' ) . click ( function ( ) {
$items. each ( function ( ) {
this . checked = ! this . checked
} )
$checkedAllBox. prop ( 'checked' , $items. filter ( ':not(:checked)' ) . length=== 0 )
} )
$ ( '#sendBtn' ) . click ( function ( ) {
$items. filter ( ':checked' ) . each ( function ( ) {
alert ( this . value)
} )
} )
$checkedAllBox. click ( function ( ) {
$items. prop ( 'checked' , this . checked)
} )
$items. click ( function ( ) {
$checkedAllBox. prop ( 'checked' , $items. filter ( ':not(:checked)' ) . length=== 0 )
} )
< / script>
< / body>
< / html>
三.添加删除记录_原生js
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> 添加删除记录练习< / title>
< link rel= "stylesheet" type= "text/css" href= "css.css" / >
< / head>
< body>
< table id= "employeeTable" >
< tr>
< th> Name< / th>
< th> Email< / th>
< th> Salary< / th>
< th> & nbsp; < / th>
< / tr>
< tr>
< td> Tom< / td>
< td> tom@tom. com< / td>
< td> 5000 < / td>
< td> < a href= "deleteEmp?id=001" > Delete< / a> < / td>
< / tr>
< tr>
< td> Jerry< / td>
< td> jerry@sohu. com< / td>
< td> 8000 < / td>
< td> < a href= "deleteEmp?id=002" > Delete< / a> < / td>
< / tr>
< tr>
< td> Bob< / td>
< td> bob@tom. com< / td>
< td> 10000 < / td>
< td> < a href= "deleteEmp?id=003" > Delete< / a> < / td>
< / tr>
< / table>
< div id= "formDiv" >
< h4> 添加新员工< / h4>
< table>
< tr>
< td class = "word" > name: < / td>
< td class = "inp" >
< input type= "text" name= "empName" id= "empName" / >
< / td>
< / tr>
< tr>
< td class = "word" > email: < / td>
< td class = "inp" >
< input type= "text" name= "email" id= "email" / >
< / td>
< / tr>
< tr>
< td class = "word" > salary: < / td>
< td class = "inp" >
< input type= "text" name= "salary" id= "salary" / >
< / td>
< / tr>
< tr>
< td colspan= "2" align= "center" >
< button id= "addEmpButton" value= "abc" >
Submit
< / button>
< / td>
< / tr>
< / table>
< / div>
< script type= "text/javascript" >
function removeTr ( ) {
var trNode = this . parentNode. parentNode;
var tds = trNode. getElementsByTagName ( "td" ) ;
var nameStr = tds[ 0 ] . firstChild. nodeValue;
var flag = confirm ( "真的要删除" + nameStr + "的信息吗?" ) ;
if ( flag) {
trNode. parentNode. removeChild ( trNode) ;
}
return false ;
}
window. onload = function ( ) {
var aEles = document. getElementsByTagName ( "a" ) ;
for ( var i = 0 ; i < aEles. length; i++ ) {
aEles[ i] . onclick = removeTr;
}
var subBtn = document. getElementById ( "addEmpButton" ) ;
subBtn. onclick = function ( ) {
var nameText = trim ( document. getElementById ( "empName" ) . value) ;
var emailText = trim ( document. getElementById ( "email" ) . value) ;
var salaryText = trim ( document. getElementById ( "salary" ) . value) ;
document. getElementById ( "empName" ) . value = nameText;
document. getElementById ( "email" ) . value = emailText;
document. getElementById ( "salary" ) . value = salaryText;
if ( nameText == "" || emailText == "" || salaryText == "" ) {
alert ( "您输入的内容不完整" ) ;
return ;
}
var nameTd = document. createElement ( "td" ) ;
nameTd. appendChild ( document. createTextNode ( nameText) ) ;
var emailTd = document. createElement ( "td" ) ;
emailTd. appendChild ( document. createTextNode ( emailText) ) ;
var salaryTd = document. createElement ( "td" ) ;
salaryTd. appendChild ( document. createTextNode ( salaryText) ) ;
var aTd = document. createElement ( "td" ) ;
var aNewEle = document. createElement ( "a" ) ;
aNewEle. href = "deleteEmp?id=XXX" ;
aNewEle. appendChild ( document. createTextNode ( "Delete" ) ) ;
aNewEle. onclick = removeTr;
aTd. appendChild ( aNewEle) ;
var trNode = document. createElement ( "tr" ) ;
trNode. appendChild ( nameTd) ;
trNode. appendChild ( emailTd) ;
trNode. appendChild ( salaryTd) ;
trNode. appendChild ( aTd) ;
var empTable = document. getElementById ( "employeeTable" ) ;
empTable. appendChild ( trNode) ;
}
function trim ( str ) {
var reg = / ^\s*|\s*$ / g ;
return str. replace ( reg, "" ) ;
}
}
< / script>
< / body>
< / html>
四.添加删除记录_jQuery
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> 添加删除记录练习< / title>
< link rel= "stylesheet" type= "text/css" href= "css.css" / >
< / head>
< body>
< table id= "employeeTable" >
< tr>
< th> Name< / th>
< th> Email< / th>
< th> Salary< / th>
< th> & nbsp; < / th>
< / tr>
< tr>
< td> Tom< / td>
< td> tom@tom. com< / td>
< td> 5000 < / td>
< td> < a href= "deleteEmp?id=001" > Delete< / a> < / td>
< / tr>
< tr>
< td> Jerry< / td>
< td> jerry@sohu. com< / td>
< td> 8000 < / td>
< td> < a href= "deleteEmp?id=002" > Delete< / a> < / td>
< / tr>
< tr>
< td> Bob< / td>
< td> bob@tom. com< / td>
< td> 10000 < / td>
< td> < a href= "deleteEmp?id=003" > Delete< / a> < / td>
< / tr>
< / table>
< div id= "formDiv" >
< h4> 添加新员工< / h4>
< table>
< tr>
< td class = "word" > name: < / td>
< td class = "inp" >
< input type= "text" name= "empName" id= "empName" / >
< / td>
< / tr>
< tr>
< td class = "word" > email: < / td>
< td class = "inp" >
< input type= "text" name= "email" id= "email" / >
< / td>
< / tr>
< tr>
< td class = "word" > salary: < / td>
< td class = "inp" >
< input type= "text" name= "salary" id= "salary" / >
< / td>
< / tr>
< tr>
< td colspan= "2" align= "center" >
< button id= "addEmpButton" value= "abc" >
Submit
< / button>
< / td>
< / tr>
< / table>
< / div>
< script type= "text/javascript" src= "jquery-1.10.1.js" > < / script>
< script type= "text/javascript" >
$ ( '#addEmpButton' ) . click ( function ( ) {
var $empName = $ ( '#empName' )
var $email = $ ( '#email' )
var $salary = $ ( '#salary' )
var empName = $empName. val ( )
var email = $email. val ( )
var salary = $salary. val ( )
var $xxx = $ ( '<tr></tr>' )
. append ( '<td>' + empName+ '</td>' )
. append ( '<td>' + email+ '</td>' )
. append ( '<td>' + salary+ '</td>' )
. append ( '<td><a href="deleteEmp?id="' + Date. now ( ) + '>Delete</a></td>' )
. appendTo ( '#employeeTable>tbody' )
. find ( 'a' )
. click ( clickDelete)
$empName. val ( '' )
$email. val ( '' )
$salary. val ( '' )
} )
$ ( '#employeeTable a' ) . click ( clickDelete)
function clickDelete ( ) {
var $tr = $ ( this ) . parent ( ) . parent ( )
var name = $tr. children ( ':first' ) . html ( )
if ( confirm ( '确定删除' + name+ '吗?' ) ) {
$tr. remove ( )
}
return false
}
< / script>
< / body>
< / html>
五.添加删除记录_jQuery2
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> 添加删除记录练习< / title>
< link rel= "stylesheet" type= "text/css" href= "css.css" / >
< / head>
< body>
< table id= "employeeTable" >
< tr>
< th> Name< / th>
< th> Email< / th>
< th> Salary< / th>
< th> & nbsp; < / th>
< / tr>
< tr>
< td> Tom< / td>
< td> tom@tom. com< / td>
< td> 5000 < / td>
< td> < a href= "deleteEmp?id=001" > Delete< / a> < / td>
< / tr>
< tr>
< td> Jerry< / td>
< td> jerry@sohu. com< / td>
< td> 8000 < / td>
< td> < a href= "deleteEmp?id=002" > Delete< / a> < / td>
< / tr>
< tr>
< td> Bob< / td>
< td> bob@tom. com< / td>
< td> 10000 < / td>
< td> < a href= "deleteEmp?id=003" > Delete< / a> < / td>
< / tr>
< / table>
< div id= "formDiv" >
< h4> 添加新员工< / h4>
< table>
< tr>
< td class = "word" > name: < / td>
< td class = "inp" >
< input type= "text" name= "empName" id= "empName" / >
< / td>
< / tr>
< tr>
< td class = "word" > email: < / td>
< td class = "inp" >
< input type= "text" name= "email" id= "email" / >
< / td>
< / tr>
< tr>
< td class = "word" > salary: < / td>
< td class = "inp" >
< input type= "text" name= "salary" id= "salary" / >
< / td>
< / tr>
< tr>
< td colspan= "2" align= "center" >
< button id= "addEmpButton" value= "abc" >
Submit
< / button>
< / td>
< / tr>
< / table>
< / div>
< script type= "text/javascript" src= "jquery-1.10.1.js" > < / script>
< script type= "text/javascript" >
$ ( '#addEmpButton' ) . click ( function ( ) {
var $empName = $ ( '#empName' )
var $email = $ ( '#email' )
var $salary = $ ( '#salary' )
var empName = $empName. val ( )
var email = $email. val ( )
var salary = $salary. val ( )
var $xxx = $ ( '<tr></tr>' )
. append ( '<td>' + empName+ '</td>' )
. append ( '<td>' + email+ '</td>' )
. append ( '<td>' + salary+ '</td>' )
. append ( '<td><a href="deleteEmp?id="' + Date. now ( ) + '>Delete</a></td>' )
. appendTo ( '#employeeTable>tbody' )
$empName. val ( '' )
$email. val ( '' )
$salary. val ( '' )
} )
$ ( '#employeeTable' ) . delegate ( 'a' , 'click' , clickDelete)
function clickDelete ( ) {
var $tr = $ ( this ) . parent ( ) . parent ( )
var name = $tr. children ( ':first' ) . html ( )
if ( confirm ( '确定删除' + name+ '吗?' ) ) {
$tr. remove ( )
}
return false
}
< / script>
< / body>
< / html>
六.轮播图_原生js
< ! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> 焦点轮播图< / title>
< style type= "text/css" >
* {
margin : 0 ;
padding : 0 ;
text- decoration: none;
}
body {
padding : 20px;
}
#container {
width : 600px;
height : 400px;
overflow : hidden;
position : relative;
margin : 0 auto;
}
#list {
width : 4200px;
height : 400px;
position : absolute;
z- index: 1 ;
}
#list img {
float : left;
}
#buttons {
position : absolute;
height : 10px;
width : 100px;
z- index: 2 ;
bottom : 20px;
left : 250px;
}
#buttons span {
cursor : pointer;
float : left;
border : 1px solid #fff;
width : 10px;
height : 10px;
border- radius: 50 % ;
background : #333 ;
margin- right: 5px;
}
#buttons . on {
background : orangered;
}
. arrow {
cursor : pointer;
display : none;
line- height: 39px;
text- align: center;
font- size: 36px;
font- weight: bold;
width : 40px;
height : 40px;
position : absolute;
z- index: 2 ;
top : 180px;
background- color: RGBA ( 0 , 0 , 0 , 0.3 ) ;
color : #fff;
}
. arrow: hover {
background- color: RGBA ( 0 , 0 , 0 , 0.7 ) ;
}
#container: hover . arrow {
display : block;
}
#prev {
left : 20px;
}
#next {
right : 20px;
}
< / style>
< / head>
< body>
< div id= "container" >
< div id= "list" style= "left: -600px;" >
< img src= "img/5.jpg" alt= "1" / >
< img src= "img/1.jpg" alt= "1" / >
< img src= "img/2.jpg" alt= "2" / >
< img src= "img/3.jpg" alt= "3" / >
< img src= "img/4.jpg" alt= "4" / >
< img src= "img/5.jpg" alt= "5" / >
< img src= "img/1.jpg" alt= "5" / >
< / div>
< div id= "buttons" >
< span index= "1" class = "on" > < / span>
< span index= "2" > < / span>
< span index= "3" > < / span>
< span index= "4" > < / span>
< span index= "5" > < / span>
< / div>
< a href= "javascript:;" id= "prev" class = "arrow" > & lt; < / a>
< a href= "javascript:;" id= "next" class = "arrow" > & gt; < / a>
< / div>
< script type= "text/javascript" >
function $ ( id ) {
return document. getElementById ( id) ;
}
function click ( id, callback ) {
$ ( id) . onclick = callback;
}
window. onload = function ( ) {
var listDiv = $ ( "list" ) ;
var totalTime = 400 ;
var intervalTime = 20 ;
var intervalId;
var imgCount = 5 ;
var moveing = false ;
var index = 0 ;
var buttonSpans = $ ( "buttons" ) . children;
var containerDiv = $ ( "container" ) ;
var intervalId2;
click ( "next" , function ( ) {
nextPage ( true ) ;
} ) ;
click ( "prev" , function ( ) {
nextPage ( false ) ;
} ) ;
clickButtons ( ) ;
autoNextPage ( ) ;
containerDiv. onmouseover = function ( ) {
clearInterval ( intervalId2) ;
}
containerDiv. onmouseout = function ( ) {
autoNextPage ( ) ;
} ;
function autoNextPage ( ) {
intervalId2 = setInterval ( function ( ) {
nextPage ( true ) ;
} , 3000 ) ;
}
function nextPage ( next ) {
if ( moveing) {
return ;
}
moveing = true ;
var offset;
if ( typeof next === 'boolean' ) {
offset = next ? - 600 : 600 ;
} else {
offset = - 600 * ( next - index) ;
}
var itemOffset = offset / ( totalTime / intervalTime) ;
var targetLeft = listDiv. offsetLeft + offset;
intervalId = setInterval ( function ( ) {
var left = listDiv. offsetLeft + itemOffset;
if ( left == targetLeft) {
clearInterval ( intervalId) ;
if ( left == 0 ) {
left = - imgCount * 600 ;
} else if ( left == - 600 * ( imgCount + 1 ) ) {
left = - 600 ;
}
moveing = false ;
}
listDiv. style. left = left + "px" ;
} , intervalTime) ;
updateButtons ( next) ;
}
function updateButtons ( next ) {
buttonSpans[ index] . removeAttribute ( "class" ) ;
var targetIndex;
if ( typeof next == 'boolean' ) {
if ( next) {
targetIndex = index + 1 ;
if ( targetIndex == imgCount) {
targetIndex = 0 ;
}
} else {
targetIndex = index - 1 ;
if ( targetIndex == - 1 ) {
targetIndex = imgCount - 1 ;
}
}
} else {
targetIndex = next;
}
index = targetIndex;
buttonSpans[ index] . className = 'on' ;
}
function clickButtons ( ) {
for ( var i = 0 , length = buttonSpans. length; i < length; i++ ) {
buttonSpans[ i] . index = i;
buttonSpans[ i] . onclick = function ( ) {
nextPage ( this . index) ;
} ;
}
}
} ;
< / script>
< / body>
< / html>
七.轮播图_jQuery
< ! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> 焦点轮播图< / title>
< style type= "text/css" >
* {
margin : 0 ;
padding : 0 ;
text- decoration: none;
}
body {
padding : 20px;
}
#container {
width : 600px;
height : 400px;
overflow : hidden;
position : relative;
margin : 0 auto;
}
#list {
width : 4200px;
height : 400px;
position : absolute;
z- index: 1 ;
}
#list img {
float : left;
}
#pointsDiv {
position : absolute;
height : 10px;
width : 100px;
z- index: 2 ;
bottom : 20px;
left : 250px;
}
#pointsDiv span {
cursor : pointer;
float : left;
border : 1px solid #fff;
width : 10px;
height : 10px;
border- radius: 50 % ;
background : #333 ;
margin- right: 5px;
}
#pointsDiv . on {
background : orangered;
}
. arrow {
cursor : pointer;
display : none;
line- height: 39px;
text- align: center;
font- size: 36px;
font- weight: bold;
width : 40px;
height : 40px;
position : absolute;
z- index: 2 ;
top : 180px;
background- color: RGBA ( 0 , 0 , 0 , 0.3 ) ;
color : #fff;
}
. arrow: hover {
background- color: RGBA ( 0 , 0 , 0 , 0.7 ) ;
}
#container: hover . arrow {
display : block;
}
#prev {
left : 20px;
}
#next {
right : 20px;
}
< / style>
< / head>
< body>
< div id= "container" >
< div id= "list" style= "left: -600px;" >
< img src= "img/5.jpg" alt= "5" / >
< img src= "img/1.jpg" alt= "1" / >
< img src= "img/2.jpg" alt= "2" / >
< img src= "img/3.jpg" alt= "3" / >
< img src= "img/4.jpg" alt= "4" / >
< img src= "img/5.jpg" alt= "5" / >
< img src= "img/1.jpg" alt= "1" / >
< / div>
< div id= "pointsDiv" >
< span index= "1" class = "on" > < / span>
< span index= "2" > < / span>
< span index= "3" > < / span>
< span index= "4" > < / span>
< span index= "5" > < / span>
< / div>
< a href= "javascript:;" id= "prev" class = "arrow" > & lt; < / a>
< a href= "javascript:;" id= "next" class = "arrow" > & gt; < / a>
< / div>
< script type= "text/javascript" src= "jquery-1.10.1.js" > < / script>
< script type= "text/javascript" src= "app.js" > < / script>
< / body>
< / html>
$ ( function ( ) {
var $container = $ ( '#container' )
var $list = $ ( '#list' )
var $points = $ ( '#pointsDiv>span' )
var $prev = $ ( '#prev' )
var $next = $ ( '#next' )
var PAGE_WIDTH = 600
var TIME = 400
var ITEM_TIME = 20
var imgCount = $points. length
var index = 0
var moving = false
$next. click ( function ( ) {
nextPage ( true )
} )
$prev. click ( function ( ) {
nextPage ( false )
} )
var intervalId = setInterval ( function ( ) {
nextPage ( true )
} , 1000 )
$container. hover ( function ( ) {
clearInterval ( intervalId)
} , function ( ) {
intervalId = setInterval ( function ( ) {
nextPage ( true )
} , 1000 )
} )
$points. click ( function ( ) {
var targetIndex = $ ( this ) . index ( )
if ( targetIndex!= index) {
nextPage ( targetIndex)
}
} )
function nextPage ( next ) {
if ( moving) {
return
}
moving = true
var offset = 0
if ( typeof next=== 'boolean' ) {
offset = next ? - PAGE_WIDTH : PAGE_WIDTH
} else {
offset = - ( next- index) * PAGE_WIDTH
}
var itemOffset = offset/ ( TIME / ITEM_TIME )
var currLeft = $list. position ( ) . left
var targetLeft = currLeft + offset
var intervalId = setInterval ( function ( ) {
currLeft += itemOffset
if ( currLeft=== targetLeft) {
clearInterval ( intervalId)
moving = false
if ( currLeft=== - ( imgCount+ 1 ) * PAGE_WIDTH ) {
currLeft = - PAGE_WIDTH
} else if ( currLeft=== 0 ) {
currLeft = - imgCount * PAGE_WIDTH
}
}
$list. css ( 'left' , currLeft)
} , ITEM_TIME )
updatePoints ( next)
}
function updatePoints ( next ) {
var targetIndex = 0
if ( typeof next === 'boolean' ) {
if ( next) {
targetIndex = index + 1
if ( targetIndex=== imgCount) {
targetIndex = 0
}
} else {
targetIndex = index - 1
if ( targetIndex=== - 1 ) {
targetIndex = imgCount- 1
}
}
} else {
targetIndex = next
}
$points[ index] . className = ''
$points[ targetIndex] . className = 'on'
index = targetIndex
}
} )