网页图片滚动代码(3款经典jQuery图片滚动代码,高端网页必备!)

效果一

效果二

效果三

今天给大家带来的是

3款经典jQuery图片水平垂直滚动切换代码

代码过长需要文档版源码来我的前端裙 581549454,已上传 到裙文件

废话不多说!上源码

CSS源码:

*{margin:0;padding:0;}

li{list-style:none outside none;}

body{background:url(../images/rbg.jpg) repeat scroll 0 0 #aaa;font-family:"宋体";padding:50px 0 0;}

/* .silder-box{width:600px;height:400px;margin:0 auto 0;position:relative;}

.silder

图片滚动代码

.silder li{width:400px;height:400px;} */

.silder-box

.silder{margin:0 auto 0;}

.silder li{width:400px;height:400px;}

.silder li img{width:100%;height:100%;}

.silder-button{top:173px;width:25px;height:54px;position:absolute;cursor:pointer;}

.silder-button.btl{left:10px;background:url(../images/bl.png);}

.silder-button.btr{right:10px;background:url(../images/br.png);}

.silder-box-1{width:1000px;}

.silder-box-2{width:500px;}

.silder-box-2 .silder li {width:200px;height:200px;}

.silder-box-3{width:1000px;}

p{font-size:20px;line-height:20px;text-align:center;color:#333;}

p span{color:#CB0000;}

h1{font-size:20px;line-height:50px;text-align:center;color:#333;}

h1 em{font-size:30px;color:#CB0000;padding:0 10px;}

textarea{display:block;text-indent:0;width:500px;margin:0 auto 20px;background:#ccc;border:0 none;resize:;font-size:12px;min-height:120px;}

textarea.t1{height:340px;margin:20px auto ;}

.small-navs

您可以还会对下面的文章感兴趣

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

使用微信扫描二维码后

点击右上角发送给好友