1、前端用的编辑器很多。在本例中，通过选择编辑器来制作轮播地图。打开电脑中安装的存储文件的Sublime Text3和demo文件夹，在里面新建一个文件，通过快捷键快速创建一个html模板。

(资料图片仅供参考)

2、并给它命名。如图所示：

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

4、 div id="scrollPics"

5、 ul class="slider"

6、 liimg src="images/1.jpg" //li

7、 liimg src="images/2.jpg" //li

8、 liimg src="images/3.jpg" //li

9、 liimg src="images/4.jpg" //li

10、 /ul

11、 ul class="num"/ul

12、 /div

13、，写外部，这里我们设置div的高度为420px，宽度为790px，设置为；设置第二个ul，并处理位置。然后在第二个ul中设置李标签，以及相关的样式；最终的样式是通过js添加的类的样式。

14、也就是说，显示对应于该索引的图片的风格。代码如下：

15、ul li {

16、 list-style: none;

17、}

18、#scrollPics {

19、 height: 420px;

20、 width: 790px;

21、 margin-bottom: 10px;

22、 overflow: hidden;

23、 position: relative;

24、}

25、.slider {

26、 margin-top: 0;

27、}

28、.num {

29、 position: absolute;

30、 right: 5px;

31、 bottom: 5px;

32、}

33、#scrollPics .num li {

34、 float: left;

35、 color: #FF7300;

36、 text-align: center;

37、 line-height: 16px;

38、 width: 16px;

39、 height: 16px;

40、 cursor: pointer;

41、 overflow: hidden;

42、 margin: 3px 1px;

43、 border: 1px solid #FF7300;

44、 background-color: #fff;

45、}

46、 #scrollPics .num li.on {

47、 color: #fff;

48、 line-height: 21px;

49、 width: 21px;

50、 height: 21px;

51、 font-size: 16px;

52、 margin: 0 1px;

53、 border: 0;

54、 background-color: #FF7300;

55、 font-weight: bold;

56、 }

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

58、 var slider=$("#scrollPics .slider");

59、var imgCon=$("#scrollPics .滑块李’)；//获取图片

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

61、var num=$("#scrollPics。num’)；//定义页面

62、 var len=slider.find("li").length;

63、 var html_page="", index=0;

64、我们想要达到的效果是图片自动旋转，所以我们需要获取相应的索引值，然后设置它，每隔一段时间切换到下一张图片。如果到了最后一张图片，索引值又变成了，也就是切换到第一张图片，如此规律。如图所示：

65、 for (var i=0; i len; i++) {

66、 if (i===0) {

67、 html_page +="li class=on " + (i + 1) + "/li";

68、 } else {

69、 html_page +="li" + (i + 1) + "/li";

70、 }

71、 }

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

73、 showPic(index);

74、 index++;

75、 if (index===len) {

76、 index=0;

77、 }

78、 }, 2000);

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

80、代码如下图所示：

81、//显示索引对应的图片。

82、 function showPic(index) {

83、 imgCon.eq(index).show().siblings("li").hide();

84、 num.find("li").eq(index).addClass("on").siblings("li").removeClass("on");

85、 }

86、//页码按钮移入

87、 $(".num li").mouseover(function () {

88、Index=$ (this). index()； //Get the index

89、 showPic(index);

90、 });

91、为选定元素触发指定事件的。当鼠标移动到相应的索引时，清除定时器，显示相应的画面。否则，继续执行定时器事件，每两秒钟，索引增加一个单位，显示相应的画面，依次播放画面。代码如下图所示：

92、$("#scrollPics").hover(function () {

93、 clearInterval(window.timer);

94、 }, function () {

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

96、 showPic(index);

97、 index++;

98、 if (index===len) {

99、 index=0;

100、 }

101、 }, 2000);

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

103、至此，完整的js代码完成，代码如下。同时完成完整的轮播代码。检查代码正确后，切换到html文件，右键或双击文件夹中的文件，看看效果。

104、效果如图(其实每次写完代码都要检查一下效果，也就是调试。)。

105、 $(function () {

106、 var slider=$("#scrollPics .slider");

107、var imgCon=$("#scrollPics .滑块李’)；//获取图片

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

109、var num=$("#scrollPics。num’)；//定义页面

110、 var len=slider.find("li").length;

111、 var html_page="", index=0;

112、//添加页码

113、 for (var i=0; i len; i++) {

114、 if (i===0) {

115、 html_page +="li class=on " + (i + 1) + "/li";

116、 } else {

117、 html_page +="li" + (i + 1) + "/li";

118、 }

119、 }

120、 num.html(html_page);

121、//显示索引对应的图片。

122、 function showPic(index) {

123、 imgCon.eq(index).show().siblings("li").hide();

124、 num.find("li").eq(index).addClass("on").siblings("li").removeClass("on");

125、 }

126、//页码按钮移入

127、 $(".num li").mouseover(function () {

128、Index=$ (this). index()； //Get the index

129、 showPic(index);

130、 })

131、 $("#scrollPics").hover(function () {

132、 clearInterval(window.timer);

133、 }, function () {

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

135、 showPic(index);

136、 index++;

137、 if (index===len) {

138、 index=0;

139、 }

140、 }, 2000);

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

142、});

143、 附：本经验关键词：怎样做轮播图、轮播图怎么做、轮播图实现原理、jquery轮播图代码、JS做轮播图、轮播图自动播放、图片轮播怎么做、怎样制作图片轮播、js如何制作图片轮播、JS怎么制作轮播图、JS轮播图、轮播图JS、JS制作轮播图。

144、 附：可以“”参考我的另一篇经验“”

145、36如何用Bootstrap制作轮播图

本文到此结束，希望对大家有所帮助。

关键词：