你们好，最近小未来发现有诸多的小伙伴们对于图片轮播代码怎么做，图片轮播代码这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、 首先，第一步是下载一个jquery库的插件。
2、 Jquery.js在网上随处可以下载。下载的插件要放在目录里，然后html文档里要链接脚本type=' text/JavaScript ' src=' jquery . js '/脚本。
3、 第二步是布局一个DIV，例如：
4、 div id='scroll'
5、 p class='subl '上一张p/
6、 Subr' Next p/
7、 ul
8、 li style='background:red;display:block;'/li
9、 //上面的李应该设置为显示，因为是第一张图片。
10、 li style='background:green;'/li
11、 li style='background:gray;'/li
12、 li style='background:orange;'/li
13、 /ul
14、 /div
15、 因为方便用户下载清楚，所以我不用图片路径，因为在你电脑上看不到。这里，我使用背景色。
16、 第三步，该写CSS了。下面这个CSS，懂基础的人都能看懂。
17、 # scroll {width: 100%; Height: 180px Background color: white; Location: relative; Border-bottom: 1px pure gray; }//Here is to set the properties for the whole big difference.
18、 # scroll ul { height:180 px； List style: None; The Underwriters' Laboratories attribute under }//DIV.
19、 # scroll ul li {宽度：100%；高度：180px边距：0px填充：0px显示：无；}//div下下的Li属性。注：显示：无；因为李的一切都应该先隐藏起来。单击时会显示出来。
20、 . Subl {location: absolute; Bottom: 20px left: 40%; Width: 80px height: 20px line height: 20px text alignment: center; Font size: 16px Font thickness: bold; Cursor: pointer; }//The property of the previous button. Pay attention to an absolute positioning.
21、 .subr{
22、 position:absolute;
23、 bottom:20px; right:40%;
24、 width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer;
25、 }//下一步按钮的属性。注意一个绝对的定位。
26、 .subr:hover{ background:yellow;border-radius:10px;}
27、 .subl:hover{ background:yellow;border-radius:10px;}
28、 //上面两个悬停是鼠标经过的效果。
29、 仔细/仔细看
30、 第四步是jQuery代码！也很简单。先看代码，你会用到的！
31、 script type='text/javascript'
32、 /*旋转木马*/
33、 $(function(){
34、 var i=0;
35、 var len=$('#scroll ul li').length-1;
36、 $('.subl').click(function(){
37、 if(i==len){
38、 i=-1;
39、 }
40、 i++;
41、 $('#scroll ul li').eq(i).fadeIn().siblings().hide();
42、 });
43、 //此处部分！上面是上一次点击的效果代码，下面是下一次点击的效果代码。
44、 $('子部分)。click(function(){//获取类名的click事件。
45、 if(i==0){
46、 i=len+1;
47、 }
48、 i--;
49、 $('#scroll ul li').eq(i).fadeIn().siblings().hide();
50、 });
51、 });
52、 /*旋转木马*/
53、 /script
54、 轻松获得简单车轮的四个步骤！
55、 整合，然后收集，慢慢来！一次不懂没关系，两次三次不懂就懂了。这是最简单的！
以上就是图片轮播代码这篇文章的一些介绍，希望对大家有所帮助。