欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

js实现图片切换原理,该怎么处理

更新时间: 2014-01-05 01:51:51 责任编辑: Author_N1

 

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()里面去么,这样改动比较大了
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:51:51
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/2197/
本文WWW.DOC100.NET DOC100.NET版权所有。