首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载.下载的插件要放在目录下.然后在html文档中链接好
第二步,布局好一个DIV,如:
上一张
下一张
- //上面的li要设定为显示,因为是第一张图片.
第三步,就到了写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是鼠标经过的效果.