日期:2014-05-16  浏览次数:20364 次

js实现图片切换原理

如上图所示的图片切换效果,样式部分已经完成了,现在求大侠们告知,js实现图片切换原理或者有没有一些框架性的可重用代码

 <div class="banner"> 
    <ul class="Slides">
    <li> <img src="images/banner_Img1_36.jpg" width="979" height="243" /></li>
    <li> <img src="images/banner_Img1_36.jpg" width="979" height="243" /></li>
    <li> <img src="images/banner_Img1_36.jpg" width="979" height="243" /></li>
    <li> <img src="images/banner_Img1_36.jpg" width="979" height="243" /></li>
    </ul>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   </ul>
 </div>

------解决方案--------------------
简单的效果就是 鼠标指到1、2、3、4、5上就显示对应的img
稍复杂的就是 诸如滚动,渐隐渐显等效果,楼主可以搜下 js Slides ,看看 实现原理,然后自己模拟做一下
------解决方案--------------------
可以搜索“jquery 图片轮播”,很多代码可用
------解决方案--------------------
这里
http://qingxinxz.tk/newindex/content.asp?id=200
有自己写的一个说明以及源码的下载地址,当然也可以下载一些jquery插件使用,效果很棒
------解决方案--------------------
在jquery中要使用setInterval(); 
了,跟setTimeout()原理差不多的吧 也就是调用一个函数,定时执行。用传统的dom的话只能做简单的图片切换
------解决方案--------------------
这。。。你把n++写到banner()里面去么,这样改动比较大了