记录分享

好用的图片无缝滚动插件(PC端)

预览链接:
http://luojing.top\rocyuan\plug_in\roll_1

下载链接:
http://luojing.top\rocyuan\plug_in\download\roll_1.ziph

兼容浏览器:

IE6及IE6以上,火狐,谷歌,360,QQ,等主流浏览器。

功能:

无缝滚动图片,鼠标移上时停止滚动,鼠标移出时恢复滚动。

反馈邮箱:

yp66666@outlook.com

作者:

RocYuan(袁鹏)

使用方法:

html:

<div class=”wrap-gd”>

<divclass=”wrap-cont”>

<ulclass=”img-gd”>

<li><imgsrc=”img/img1.jpg”alt=””></li>

<li><imgsrc=”img/img2.jpg”alt=””></li>

<li><imgsrc=”img/img3.jpg”alt=””></li>

</ul>

</div>

</div>

css:

<style>

*{padding:0;margin:0;}

li{list-style: none;}

.wrap-gd{ width: 1500px; height: 300px; position: relative; overflow: hidden; }

.wrap-cont{ position: absolute; left:0; top:0; width: 200%; }

.img-gd{ overflow: hidden; position: absolute; left:0; top:0; }

.img-gdli{ float: left; width: 500px; }

.img-gdimg{ display: block; }

</style>

js:

引入js文件

<scriptsrc=”js/jquery.min.js”></script>

<scriptsrc=”js/roll.min.js”></script>

<script>

ImgRool({

seep:5,          //滚动速度     默认参数 5

imgsub:3      //图片张数    默认参数 3

})

</script>  

————————————————————-

★留言评论,将在筛选审核通过后展示!★

4条评论

Leave a Reply

电子邮件地址不会被公开。