多语言展示
当前在线:458今日阅读:103今日分享:49

最简单的图片轮播代码

最简单的图片轮播制作,没学会你找我!清晰步骤,很简单.思路清晰.
方法/步骤
1

首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载.下载的插件要放在目录下.然后在html文档中链接好

2

第二步,布局好一个DIV,如:

 

上一张

 

下一张

 

       
  •  //上面的li要设定为显示,因为是第一张图片.   
  •    
  •    
  •  
 
由于方便各位网友下载能够清晰明了,我就没有用图片路径了,因为到你们电脑上就看不到了,这里用背景颜色.

3

第三步,就到了写CSS的时候了.下面的CSS懂基础的人都看得懂.#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的DIV设定属性.#scroll ul{height:180px; list-style:none;}//DIV下的UL属性.#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//DIV下的UL下的LI属性.注意:display:none;因为要将所有的li隐藏了先.当点击的时候在显示出来. .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;}//上一张按钮的属性.注意一个绝对定位. .subr{ position:absolute; bottom:20px; right:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; }//下一张按钮的属性.注意一个绝对定位..subr:hover{ background:yellow;border-radius:10px;}.subl:hover{ background:yellow;border-radius:10px;}//以上两个hover是鼠标经过的效果.

推荐信息