资源：

html代码：

1: 

2: 

3: 

4:     
       

5:     

6:     
       

7:     
       

8:     
       

9:     

1:

2:     

</script>

10: 

11: 

12:     
       

13:         
       

14:             

15:                 

16:             

17:                

18:                 

19:             

20:             

21:                 

22:             

23:             

24:                 

25:             

26:          

27:     

28:     
       

29:         <

30:         >

31:     

32:     
       

33:         
       

34:             
1

35:             
2

36:             
3

37:             
4

38:         

39:     

40: 

41: 

css代码

1: #ad

2: {

3:     width: 1350px;

4:     height: 370px;

5:     overflow: hidden;

6:     margin-left:-5px;

7:     position: relative;

8: }

9: #ad ul

10: {

11:     list-style: none;

12:     position: absolute;

13:     margin-left: -40px;

14: }

15: #ad ul li

16: {

17:     float: left;

18:     width: 1350px;

19:     height: 370px;

20:     position: relative;

21: }

22: .slideshortcut a

23: {

24:     color: #000000;

25:     text-decoration: none;

26:     background-color: #fff;

27:     display: block;

28:     position: absolute;

29:     z-index: 500;

30:     top: 150px;

31:     width: 50px;

32:     height: 50px;

33:     border: 1px solid red;

34:     font-size: 40px;

35:     line-height: 40px;

36:     text-align: center;

37:     opacity: 0;

38: }

39: .slideshortcut a:hover

40: {

41:     color: #000000;

42:     text-decoration: none;

43: }

44: .prev

45: {

46:     left: 150px;

47: }

48: .next

49: {

50:     left: 1200px;

51: }

52: .jiaodiandiv

53: {

54:     position: absolute;

55:     z-index: 200;

56:     top: 320px;

57:     left: 42%

58: }

59: .jiaodiandiv ul

60: {

61:     list-style: none;

62: }

63: .jiaodiandiv ul li

64: {

65:     width: 30px;

66:     height: 30px;

67:     margin-left: 10px;

68:     float: left;

69:     border: 1px solid #B7B7B7;

70:     background-color: #B7B7B7;

71:     border-radius:15px;

72:     text-align: center;

73: }

74: #selectli

75: {

76:     background-color: #FF4400;

77: }

78: .jiaodiandiv li:hover

79: {

80:     cursor: pointer;

81: }

82: .jiaodiandiv span

83: {

84:     font-size: 20px;

85:     line-height: 30px;

86: }

js代码：

1: $(document).ready(function()

2:   {

3:      /*轮播*/

4:     var index = 0;

5:     var jdlis = $('.jiaodiandiv li'); /*焦点li元素集合*/

6:     var timer;

7:     var liWidth = $('#ad').width();

8:     var len = $("#ad ul li").length;

9:     //左右滚动，即全部li元素都是在同一排向左浮动，所以这里须要计算出外围ul元素的宽度

10:     $("#ad ul").css("width",liWidth * (len));

11:

12:     //上一张button

13:     $("#SlidePrev").click(function() {

14:     clearInterval(timer);

15:     index -= 1;

16:     if(index == -1) {index = len - 1;}

17:     showPic(index);

18:     });

19:

20:     //下一张button

21:     $("#SlideNext").click(function() {

22:     clearInterval(timer);

23:     index += 1;

24:     if(index == len) {index = 0;}

25:     showPic(index);

26:     });

27:     //轮播

28:     $('#ad').hover(

29:     function()

30:     {

31:       clearInterval(timer); /*停止动画*/

32:       $('.slideshortcut a').show().css('opacity','0.4');

33:     },

34:     function()

35:     {

36:         $('.slideshortcut a').hide();

37:         timer=setInterval(function() {

38:         showPic(index);

39:         index++;

40:         if(index == len) {index = 0;}

41:       },2000);

42:     }).trigger("mouseleave");

43:     /*显示index图片*/

44:     function showPic(index){

45:      var nowLeft = -index*liWidth;

46:      jdlis.eq(index).css('backgroundColor','#FF4400');

47:      jdlis.not(jdlis.eq(index)).css('backgroundColor','#B7B7B7');

48:      $("#ad ul").stop(true,false).animate({
      "left":nowLeft},300);

49:      /*$('#loginimg').hide().fadeIn(1000);*/

50:     }

51:     $('.slideshortcut a').mouseover(function()

52:     {

53:       $('.slideshortcut a').show();

54:     });

55:     $('.prev').mouseover(

56:     function()

57:     {

58:       $(this).css({opacity:'0.95',cursor:'pointer'});

59:     });

60:     $('.next').mouseover(

61:     function()

62:     {

63:       $(this).css({opacity:'0.95',cursor:'pointer'});

64:     });

65:     /*点击焦点区的div显示相应图*/

66:     jdlis.click(

67:     function(){

68:       clearInterval(timer);

69:       index = jdlis.index(this);

70:       showPic(index);

71:     });

72:   });

 

打包下载：

版权声明：本文博客原创文章，博客，未经同意，不得转载。