你们好，最近小艾特发现有诸多的小伙伴们对于html图片轮播完整代码，html图片轮播代码这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、首先第一步，下载好一个jquery库的插件，jquery.js 网上很多随处可以下载．下载的插件要放在目录下．然后在html文档中链接好<script type="text/javascript" src="jQuery.js"></script>

2、第二步，布局好一个DIV,如：

3、<div id="scroll">

4、 <p class="subl">上一张<p/>

5、 <p class="subr">下一张<p/>

6、 <ul>

7、 <li style="background:red;display:block;"></li>

8、　//上面的ｌｉ要设定为显示，因为是第一张图片．

9、 <li style="background:green;"></li>

10、 <li style="background:gray;"></li>

11、 <li style="background:orange;"></li>

12、 </ul>

13、</div>

14、由于方便各位网友下载能够清晰明了，我就没有用图片路径了，因为到你们电脑上就看不到了，这里用背景颜色．

15、第三步，就到了写CSS的时候了．下面的CSS懂基础的人都看得懂．

16、#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的ＤＩＶ设定属性．

17、#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ属性．

18、#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．

19、.subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性．注意一个绝对定位．

20、.subr{

21、 position:absolute;

22、 bottom:20px; right:40%;

23、 width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer;

24、}//下一张按钮的属性．注意一个绝对定位．

25、.subr:hover{ background:yellow;border-radius:10px;}

26、.subl:hover{ background:yellow;border-radius:10px;}

27、//以上两个hover是鼠标经过的效果．

28、第四步，就是ｊｑｕｅｒｙ代码了！也很简单．先将代码看一遍，你就会用了！

29、<script type="text/javascript">

30、/*轮播*/

31、$(function(){

32、 var i=0;

33、 var len=$("#scroll ul li").length-1;

34、 $(".subl").click(function(){

35、 if(i==len){

36、 i=-1;

37、 }

38、 i++;

39、 $("#scroll ul li").eq(i).fadeIn().siblings().hide();

40、 });

41、//到这里分开！上面的是上一张点击的效果代码，下面的是下一张点击的效果代码．

42、 $(".subr").click(function(){//获取类名的点击事件．

43、 if(i==0){

44、 i=len+1;

45、 }

46、 i--;

47、 $("#scroll ul li").eq(i).fadeIn().siblings().hide();

48、 });

49、});

50、/*轮播*/

51、</script>

52、四步轻松搞定一个简单的轮！

以上就是html图片轮播代码这篇文章的一些介绍，希望对大家有所帮助。