轮播图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制作旋转地图
这篇文章到此就结束,希望能帮助到大家。
扫描二维码推送至手机访问。
版权声明:文章内容摘自网络,如果无意之中侵犯了您的版权,请联系本站,本站将在3个工作日内删除。谢谢!