轮播图js代码（轮播图js代码）

大家好,今天就和兔兔一起来看看这个问题吧 。轮播图js代码，轮播图js代码很多人还不知道，现在让我们一起来看看吧！

1、 前端用到的编辑器有很多，本例通过选择编辑器来实现轮播图的制作。打开电脑中安装的崇高的文本3，演示文件夹用来存放文件，在里面新建一个文件，通过快捷键迅速创建一个超文本标记语言模板，并命名。如图所示：

2、 ,在身体中写简单的超文本标记语言代码。首先在顶部头标签里引入注意要然后在一个差异中包裹，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、 ,写外部其中，我们设置差异的高为420px，宽为790px，并且设为；第二个保险商实验所设置，并处理好位置。然后第二个保险商实验所中的里标签设置，以及相关样式；最后的样式是通过射流研究…新增的类的样式，即显示索引对应的图片的样式。代码如下：

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、 至此，完整的射流研究…代码就完成了，代码如下。同时，完整的轮播图代码也就完成了。我们检查代码无误后，切换到超文本标记语言文件，右击，或在文件夹中双击文件，在查看效果，效果如图所示（其实每写完一步代码就应该查看效果，即调试。)。

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制作轮播图。

138、 附：可以""参考我的另一篇经验""

139、 36如何用引导程序制作轮播图

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