http://chinaqking.com/main/js/Slidehow.js

1// JScript 文件
2$(document).ready(function(){
3  var currentPosition = 0;
4  var slideWidth = 574;
5  var slides = $('.slide');
6  var numberOfSlides = slides.length;
7  var currentP=1;       //当前页
8  var totalP=0;         //总页数
9  // Remove scrollbar in JS
10  $('#slidesContainer').css('overflow', 'hidden');
11
12  // Wrap all .slides with #slideInner div
13  slides
14    .wrapAll('<div id="slideInner"></div>')
15    // Float left to display horizontally, readjust .slides width
16	.css({
17      'float' : 'left',
18      'width' : slideWidth
19    });
20
21  // Set #slideInner width equal to total width of all slides
22  $('#slideInner').css('width', slideWidth * numberOfSlides);
23
24  // Hide left arrow control on first load
25  manageControls(currentPosition);
26
27  // Create event listeners for .controls clicks
28  $('.control')
29    .bind('click', function(){
30    clearInterval(slideTimer);
31    // Determine new position
32	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
33    
34	// Hide / show controls
35    manageControls(currentPosition);
36    // Move slideInner using margin-left
37    $('#slideInner').animate({
38      'marginLeft' : slideWidth*(-currentPosition)
39    });
40  });
41  
42  //绑定当前页和总页数
43 totalP=$("#slidesContainer .slide").length;
44 $("#slide_total").html(totalP);
45 //$("#slide_current").html("1");
46  // manageControls: Hides and Shows controls depending on currentPosition
47  function manageControls(position){
48    $("#slide_current").html(position+1);
49    // Hide left arrow if position is first slide
50	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
51	// Hide right arrow if position is last slide
52    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
53  }
54  
55  /***************以下这段代码用于自动滚动***************************/
56
57  var flag=true;
58  var slideTimer=setInterval(function(){
59  	 //flag为true时向左滚动，flag为false时向右滚动
60	 if(flag){
61	   	currentPosition ++;
62	  }
63	  else{
64	  	currentPosition --;
65	  }
66     
67	// 隐藏或显示左右按钮
68    manageControls(currentPosition);
69    // 控制slideInner的"marginLeft"值随当前页数而变化，animate表示以动画的方式滚动。
70	//每单击一次都重新调整slideInner相对于父DIV的marginLeft值，负数表示向左移动。
71    $('#slideInner').animate({
72      'marginLeft' : slideWidth*(-currentPosition)
73    });
74	if(currentPosition==2||currentPosition==0) flag=!flag;
75  },5000);
76 	
77});