首先还是要引用jquery框架的。 然后开始HTML代码： 代码如下:<div id="New_zlMimgMv"> <div class="imgMvBox"> <ul id="imgMvCon"> <li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> <li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> <li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> </ul> </div> <div class="imgMvNum"> <a href="javascript:;">专业...
先说一种最普遍的思路： 把图片们用ul之类的包起来，并设置float。然后设置这个ul本身为absolute定位，其父标签用relative定位。通过设置ul的left或top值，实现图片队列的滚动效果 特点： 只操作一个html元素（即上文的ul），对系统开销小；滚到头会回滚；从大序号滚动到小序号也会回滚；从最后序号滚动到第一个，会“咻”的一下把所有中间的图片也路过一次。 另一种思路就是我在XScroll.js里实现的思路，所有图片用绝对定位。具体...
这个效果比较特别，可爱，所以在外面网站没怎么看到过，有兴趣的朋友可以下载后自己使用。 PS: 经过修改已经兼容大众浏览器。效果图:在线演示：http://demo.jb51.net/js/ImagesRotateScroll/index.htmlStep1. 创建HTML 代码如下:<div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><img src="images/SF1.jpg" alt="Chun-Li" /></li> <li><img src="images/SF2.jpg" alt="VEGA" /></li> <li><img src="ima...
css: 代码如下:<style type="text/css"> .rollBox { width: 704px; overflow: hidden; padding: 12px 0 5px 6px; } .rollBox .LeftBotton { height: 52px; width: 19px; background: url(jt.gif) no-repeat 11px 0; overflow: hidden; float: left; display: inline; margin: 25px 0 0 0; cursor: pointer; background-color:Blue; color:White; } .rollBox .RightBotton { height: 52px; width: 20px; background: url(jt.gif) no...
You are free to use this in any product, or on any web site. For more information about ImageFlow read the Documentation and check my Newsblog. For anything else simply drop me a line in my Shoutbox. ChangeLog Version 0.8 Added Safari 1.x compatibility (a very big thanks to Stephan Droste!) Added image link events onclick and ondblclick: the link is directly stored in the longdesc attribute of th...
代码如下:<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%> <!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> <script language="javascript"> <!-- //书上说这样可以预缓存图片对象，实际是骗人的了...
DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>无缝滚动2</title><style>#warp{width: 1250px;height: 300px;overflow: hidden;margin:100px auto 0;overflow-x: auto;}#warp #con{width: 4000px;height: 300px;overflow: hidden;}#warp #con #box1{float: left;overflow: hidden;}#warp #con #box2{float: left;overflow: hidden;}#warp img{float: left;margin-right: 10px;width: 200px;height: 300px;}....