求一个图片效果。望大神详细解答,谢谢!!!!!

我自是年少-韶华倾负 2013-04-02 03:52:17

如图啊 点击 左右的 箭头 是图片整体移动。箭头有2种样式 一个是正常状态 一个是 点击跟鼠标放上去的状态。 小图上的 箭头 是用来更改图片位置的,就是点击左箭头 就会像左移动一个位置 点击右边的 就会向右移动一个位置,每个小图都有这个 效果。谢谢!!!
...全文
148 点赞 收藏 7
写回复
7 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
网络科技 2013-04-04
引用 6 楼 showbo 的回复:
按照你的图片写了一个,去这里下载:图片滚动切换位置jquery插件
不错,收藏了。。
回复
按照你的图片写了一个,去这里下载:图片滚动切换位置jquery插件
回复
sdfhejian520 2013-04-03
自己扩展下吧
回复
sdfhejian520 2013-04-03
<html> <style type="text/css"> #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 510px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } #myBtnlast { float: left; } #myBtnNext { float: left } </style> <div style="margin:auto 0;float: left;"> <input type="button" id="myBtnlast" value="<<"/> </div> <div style="margin:auto 0;float: left;"> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a> <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a> <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a> <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a> </div> <div id="demo2"></div> </div> </div> </div> <div style="margin:auto 0"> <input type="button" onclick="javascript:lastImg();" id="myBtnNext" value=">>"/> </div> <script> var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; var MyMar1; // 按钮触发翻滚 function lastImg() { if (null == MyMar1) { MyMar1=setInterval(nextImg,speed); setTimeout("stopa()", 5000); } // } function stopa() { clearInterval(MyMar1); MyMar1 = null; } function nextImg() { if(tab.scrollLeft>0) { tab.scrollLeft--; } else { tab.scrollLeft+=tab2.offsetWidth } } function Marquee(){ if(tab.scrollLeft<=0) { tab.scrollLeft+=tab2.offsetWidth } else{ tab.scrollLeft-- } } // 图片无缝翻滚 //var MyMar=setInterval(Marquee,speed); //tab.onmouseover=function() {clearInterval(MyMar)}; //tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; </script> </html>
回复
打字员 2013-04-03
看LZ的意思是來求碼的,這個弄起來還是有點複雜的。 友情幫項吧!
回复
没有大神路过么 还是分数低了
回复
不熟不聊 2013-04-02
之前写过一个类似的。。 用绝对定位就可以,当点击按钮的时候,动态的改变图片的绝对定位的top和left就可以了。 然后设置外围container overflow:hidden。 主要就是操作DOM,改变top和left
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告