jquery控制图片左右滚动-创新互联

图片左右滚动,有时候无缝比较难实现,可以让图片在向左滚动结束然后接着倒着滚动,这样也可以说是一种无缝滚动,在网上下载了一个点击按钮左右滚动的例子,我经过修改,可以左右自由滚动,鼠标滑上停止滚动,图片放大,滑下接着滚动,点击按钮也可以控制左右。看代码:

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的台江网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

先看jsp:






     

  •  

  •  

  •  

  •  

  •  

  •  

  •  

  •  

  •  

  •  

  •  

  •  




再看css样式:

*{margin:0;padding:0;list-style-type:none;}
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";background:#eee;}

.sliderbox{url(.. /p_w_picpaths/index-bottom.jpg) no-repeat 0 -1px;width:530px;height:200px;overflow:hidden;padding:50px 0 0 0;margin:20px auto;}
.arrow-btn{margin:35px 0 0 0;display:inline;url(.. /p_w_picpaths/arrow-btn.png) no-repeat;width:26px;height:124px;overflow:hidden;cursor:pointer;}
#btn-left{float:left;margin-left:12px;background-position:0 0;}
#btn-left.dasabled{background-position:0 -124px;}
#btn-right{float:right;margin-right:6px;cursor:pointer;background-position:-26px 0;}
#btn-right.dasabled{background-position:-26px -124px;}
.slider{width:450px;overflow:hidden;position:relative;height:166px;float:left;}
.slider ul{position:absolute;left:0px;top:32px;width:1800px;height:140px;list-style:none;}
.slider li{float:left;width:150px;height:140px;}
.slider a{display:block;text-decoration:none;color:#073a5e;font-size:12px;font-weight:bold;text-align:center;margin-top:24px;}
.slider img{width:90px;display:inline-block!important;}

最后看js:

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享名称:jquery控制图片左右滚动-创新互联
当前地址:http://myzitong.com/article/ddpcec.html