轮播图js代码（轮播图JS代码每隔一秒自动切换）

大家好,今天就和小白一起来看看这个问题吧 。轮播图JS代码每隔一秒自动切换，轮播图js代码很多人还不知道，现在让我们一起来看看吧！

1、 前端使用了很多编辑器。本例通过选择编辑器实现了carousel的制作。打开电脑中安装的Sublime Text3，demo文件夹是用来存放文件的，在里面新建一个文件，通过快捷键快速创建一个html模板，并命名。如图所示：

2、 ，在主体中编写简单的html代码。首先，在top head标记中引入注释，然后将其包装在一个div中。ul用于显示图片，ul定义页码。代码如下：

3、 div id='scrollPics '

4、 ul class='slider '

5、 liimg src='images/1.jpg' //li

6、 liimg src='images/2.jpg' //li

7、 liimg src='images/3.jpg' //li

8、 liimg src='images/4.jpg' //li

9、 /ul

10、 ul class='num'/ul

11、 /div

12、 ，写外部的，其中我们设置div的高度为420px，宽度为790px，设置为；设置第二个ul，并处理位置。然后设置第二个ul中的li标签，以及相关的样式；最后一种样式是通过js新建类的样式，也就是显示索引对应的图片的样式。代码如下：

13、 ul li {

14、 列表样式：无；

15、 }

16、 #scrollPics {

17、 高度：420px

18、 宽度：790px

19、 边距-底部：10px

20、 溢出：隐藏；

21、 位置：相对；

22、 }。滑块{

23、 边距-顶部：0；

24、 }。数量{

25、 位置：绝对；

26、 右：5px

27、 底部：5px

28、 }

29、 #scrollPics。num li {

30、 浮动：左；

31、 颜色：# FF7300

32、 文本对齐：居中；

33、 行高：16px

34、 宽度：16px

35、 高度：16px

36、 光标：指针；

37、 溢出：隐藏；

38、 保证金：3px 1px

39、 边框：1px纯色# FF7300

40、 背景色：# fff

41、 }

42、 #scrollPics。num li.on {

43、 颜色：# fff

44、 行高：21px

45、 宽度：21px

46、 身高：21px

47、 字体大小：16px

48、 边距：0 1px

49、 边框：0；

50、 背景色：# FF7300

51、 字体粗细：粗体；

52、 }

53、 然后开始写核心代码。首先，定义几个全局变量。其中，表示除第一张图片外，获取、初始化并隐藏对应图片中存储的变量；变量用于定义页码；定义图片的数量；表示一个索引。如图所示：

54、 var slider=$('#scrollPics。滑块’)；

55、 var imgCon=$('#scrollPics。滑块Li’)；//获取图片

56、 imgCon.not(imgCon.eq(0))。hide()；//隐藏除第一个以外的所有内容

57、 var num=$('#scrollPics。num’)；//定义页码

58、 var len=slider.find('li ')。长度；

59、 var html_page=“”，index=0；

60、 我们想要达到的效果是图片自动旋转，所以需要获取相应的索引值，然后设置为每隔一段时间切换到下一张图片。如果到达最后一张图片，索引值会再次改变，即切换到第一张图片，以此类推。如图所示：

61、 for(var I=0；我leni ) {

62、 if (i===0) {

63、 html _ page=' Li class=on '(I 1)'/Li '；

64、 }否则{

65、 html _ page=' Li '(I 1)'/Li '；

66、 }

67、 }

68、 window . timer=setInterval(function(){

69、 showPic(索引)；

70、 指数；

71、 if (index===len) {

72、 索引=0；

73、 }

74、 }, 2000);

75、 当我们点击或者移动鼠标到一个索引时，显示的是对应索引对应的图片，旁边的图片是该索引的样式和对应兄弟节点对应的样式；然后添加一个鼠标移动事件，用来获取索引，显示索引对应的图片。代码如下图所示：

76、 //显示索引对应的图片

77、 函数showPic(index) {

78、 imgCon.eq(index)。显示()。兄弟姐妹(“李”)。hide()；

79、 num.find('李')。eq(指数)。addClass('on ')。兄弟姐妹(“李”)。remove class(' on ')；

80、 }

81、 //页码按钮移入

82、 $('.num Li’)。mouseover(function () {

83、 index=$(这个)。index()；//获取索引

84、 showPic(索引)；

85、 });

86、 一个，它触发选定元素的指定事件。当鼠标移动到相应的索引时，定时器清零，显示相应的画面。否则，继续执行定时器事件。每两秒钟，索引会增加一个单位，并显示相应的图片，图片会进行旋转。代码如下图所示：

87、 $('#scrollPics ')。hover(function () {

88、 clear interval(window . timer)；

89、 }，function () {

90、 window . timer=setInterval(function(){

91、 showPic(索引)；

92、 指数；

93、 if (index===len) {

94、 索引=0；

95、 }

96、 }, 2000);

97、 }).触发器(' mouse leave ')；//触发选中元素的指定事件

98、 至此，完整的js代码完成。代码如下。同时完成完整的轮播代码。我们检查完代码正确后，切换到html文件，右键或者双击文件夹中的文件，检查效果如图(其实每次写代码都要检查效果，也就是调试。)。

99、 $(function () {

100、 var slider=$('#scrollPics。滑块’)；

101、 var imgCon=$('#scrollPics。滑块Li’)；//获取图片

102、 imgCon.not(imgCon.eq(0))。hide()；//隐藏除第一个以外的所有内容

103、 var num=$('#scrollPics。num’)；//定义页码

104、 var len=slider.find('li ')。长度；

105、 var html_page=“”，index=0；

106、 //添加页码

107、 for(var I=0；我leni ) {

108、 if (i===0) {

109、 html _ page=' Li class=on '(I 1)'/Li '；

110、 }否则{

111、 html _ page=' Li '(I 1)'/Li '；

112、 }

113、 }

114、 num . html(html _ page)；

115、 //显示索引对应的图片

116、 函数showPic(index) {

117、 imgCon.eq(index)。显示()。兄弟姐妹(“李”)。hide()；

118、 num.find('李')。eq(指数)。addClass('on ')。兄弟姐妹(“李”)。remove class(' on ')；

119、 }

120、 //页码按钮移入

121、 $('.num Li’)。mouseover(function () {

122、 index=$(这个)。index()；//获取索引

123、 showPic(索引)；

124、 })

125、 $('#scrollPics ')。hover(function () {

126、 clear interval(window . timer)；

127、 }，function () {

128、 window . timer=setInterval(function(){

129、 showPic(索引)；

130、 指数；

131、 if (index===len) {

132、 索引=0；

133、 }

134、 }, 2000);

135、 }).触发器(' mouse leave ')；//触发选中元素的指定事件

136、 });

137、 附：本次体验关键词：如何制作轮播，如何制作轮播，轮播实现原理，jquery轮播代码，js制作轮播，轮播自动回放，如何制作轮播，JS制作轮播，JS制作轮播，JS制作轮播，JS制作轮播，JS制作轮播，JS制作轮播。

138、 P.S .你可以参考我的其他经历。

139、 36如何用Bootstrap制作旋转地图

这篇文章到此就结束，希望能帮助到大家。