jq实现图片轮播:圆形焦点+左右控制+自动轮播

我就是我 2022-08-12 21:00 240阅读 0赞

来源：[http://www.ido321.com/862.html][http_www.ido321.com_862.html]

html代码：

1: <!DOCTYPE html>

2: <html lang="en">

3: <head>

4:     <meta http-equiv="content-type" content="text/html;charset=utf-8">

5:     <title>JQ图片轮播</title>

6:

7:     <link rel="stylesheet" type="text/css" href="style.css">

8:

9:     <script type="text/javascript" src="jquery.min.js"></script>

2:     <script type="text/javascript" src="style.js">

</script>

10: </head>

11: <body>

12:     <div id="ad">

13:         <ul>

14:             <li>

15:                 <a href="#" title="位置1"><img src="ad.png"></a>

16:             </li>

17:                <li>

18:                 <a href="#" title="位置2"><img src="1.jpg"></a>

19:             </li>

20:             <li>

21:                 <a href="#" title="位置3"><img src="2.jpg"></a>

22:             </li>

23:             <li>

24:                 <a href="#" title="位置4"><img src="3.jpg"></a>

25:             </li>

26:          </ul>

27:     </div>

28:     <div class="slideshortcut">

29:         <a id="SlidePrev" class="prev"><</a>

30:         <a id="SlideNext" class="next">></a>

31:     </div>

32:     <div class="jiaodiandiv">

33:         <ul>

34:             <li id="selectli"><span>1</span></li>

35:             <li><span>2</span></li>

36:             <li><span>3</span></li>

37:             <li><span>4</span></li>

38:         </ul>

39:     </div>

40: </body>

41: </html>

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:     //上一张按钮

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

14:     clearInterval(timer);

15:     index -= 1;

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

17:     showPic(index);

18:     });

19:

20:     //下一张按钮

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:   });

打包下载：[http://download.csdn.net/detail/u011043843/7994017][http_download.csdn.net_detail_u011043843_7994017]

[http_www.ido321.com_862.html]: http://www.ido321.com/862.html
[http_download.csdn.net_detail_u011043843_7994017]: http://download.csdn.net/detail/u011043843/7994017

jq实现图片轮播:圆形焦点+左右控制+自动轮播

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关无缝轮播/自动轮播

相关轮播图实现(含1.自动轮播 2.左右点击轮播 3.图片数点击播放)

相关 html实现自动图片轮播,图片轮播的实现（html__js）

相关 jquery实现图片自动轮播

相关 jq实现图片轮播:圆形焦点+左右控制+自动轮播

相关 js实现图片左右轮播（一）

相关 ViewPager 无限轮播自动轮播

相关 JQ轮播(左右轮播切换，小圆点hover)

相关轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播

相关 JQ实现轮播图