左右切换鼠标可控的无缝图片滚动代码

2024-09-05 12:21:12

字体：大中小

来源：转载

供稿：网友

以前见过这种效果，但是是基于FLASH技术，现在是纯用JS实现的，代码有点多，不过效果还不错，实际上它也是一个图片滚动，只不过它完全是用鼠标点击控制的，也就是说鼠标不点击的时候它是静止的，每点一下向后移动一个图片，无缝衔接，如些循环。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>超级经典一套鼠标控制左右滚动图片带自动翻滚</title><style type="text/css"></style></head><body><div class="rollBox">     <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>     <div class="Cont" id="ISL_Cont">      <div class="ScrCont">       <div id="List1">                        <div class="pic">          <img src="/d/file/p/2024/09-05/2fa59d86ab2389b91731992009826fd0.jpg" width="109" height="87" />          <p>风景美如画</p>         </div>                <div class="pic">          <img src="/d/file/p/2024/09-05/9e7860063550cd113f8512dbebe45e3d.jpg" width="109" height="87"  />          <p>千里之行</p>         </div>         <div class="pic">          <img src="/d/file/p/2024/09-05/777621977d735f4c6da578041571fb9e.jpg" width="109" height="87" />          <p>学习源码站</p>         </div>         <div class="pic">          <img src="/d/file/p/2024/09-05/dd621deaabbe2c4563a4eb85c0923e07.jpg" width="109" height="87" />          <p>每一款都测试</p>         </div>         <div class="pic">          <img src="/d/file/p/2024/09-05/5c7adc4c125aacc0f1c21bc6faaf173c.jpg" width="109" height="87" alt="你难道不喜欢" />          <p>你难道不喜欢</p>         </div> <div class="pic">          <img src="/d/file/p/2024/09-05/ead3b830a1c7c2a0e472e406d0a4f1f8.jpg" width="109" height="87" />          <p>你太令我失望了</p>         </div>               <div class="pic">          <img src="/d/file/p/2024/09-05/aaa88d1f2914922d5030a18589846409.jpg" width="109" height="87" />          <p>今天早点睡</p>         </div>                       </div>       <div id="List2"></div>      </div>     </div>     <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>    </div>   </div><script language="javascript" type="text/javascript"><![CDATA[//><!]]></script></body></html>

上一篇：搜狐女人频道首页的JS图片切换效果

下一篇：JS实现图片的淡入淡出效果