一个效果如果没有一个合理的布局，是很难作出来的，所以布局是非常重要的基础！ 下边的效果，是试着假设在布局我无法改的情况下，能过外边的CSS或Javascript来实现一个滑动图片效果！
第一步，设计一下我想要的效果！
我用FW把以前作的相册效果（https://www.ufcn.cn/blogview.asp?logID=628）改了改，设计一张简单的效果图！
第二步，布局！
复制代码 代码如下:
这时可以看一下效果：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第三步，设计一下Javascript；
复制代码 代码如下:
这个时候再看一下效果！
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第四步，写CSS来完成计划时的样子！
复制代码 代码如下:
/*重设所有的标属基本的属性，在实际中最好不要用*来写，性能不太好，作例子就算了*/
*{ margin:0; padding:0; list-style:none;}
/*设置一个网页的基本属性*/
body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;}
/*重设写有图片的属性，最主要是解决浏览器的空格BUG*/
img{ border:0; display:block;vertical-align:middle}
/*最外边的DIV的边框和背景色简单设置一下*/
#imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;}
/*这个DIV在布局时是没有的，是我用JAVASCRIPT创建的，我把他的宽度写死，溢出的内容全部隐藏*/
#imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden}
/*这里是父子全加了浮动，以浮制浮，解决自动适应的问题，并让图片横向排列*/
#imgBox,#imgBox ul,#imgBox li{ float:left;}
/*这里其它应该让JAVASCRIPT去计算宽度，就可以实现图片无限加减，都会自适应，我这里偷了个懒，直接写死了*/
#imgBox ul{ width:4100px;}
/*下边这些就是写了一下链接和效果，没什么*/
#imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none}
#imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF}
#imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;}
#imgBox a:hover span{ background:#000; color:#fff}
好了，全部完成，看一下最后的效果吧！
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
以上就是非常不错的 子鼠 滑动图片效果 Javascript+CSS的详细内容，更多请关注本站其它相关文章！
