《jquery实现图片的切换.docx》由会员分享，可在线阅读，更多相关《jquery实现图片的切换.docx（4页珍藏版）》请在三一办公上搜索。
1、jquery实现图片的切换Jquery实现图片的切换 寻找html元素 在实现这个操作时，需要寻找html元素。通过id，css，html元素来寻找对应的html所在位置。 图片源的切换 $(section).attr(src,图片地址URL); Section就是通过上面的方法选择html元素。 按钮的点击效果 $(document).ready(function $(section).click(function 产生效果的代码 ); ); 设计函数切换图片源 需要设计一个函数，同时这个函数需要同时在一定的间隔时间内，不断的执行。 setInterval(s,3000); s为定义的函数名
2、，3000表示每隔3秒执行一次这个函数s。 需要一个全局变量来作为判断的条件，来执行何时切换图片源。 参考代码： javaScript定时切换图片 .image .post color: rgba(0,0,0,1); background-color: rgba(255,255,255,0); display:block; padding: 0px,0px,0px,0px; cursor:pointer; width:300px; height:250px; filter:alpha(opacity=0); -moz-opacity: .5; opacity: .5; border:0; ma
3、rgin:10px; .weizhi1 .weizhi2 .weizhi3 position:fixed; left:290px; top:230px; top:230px; position:fixed; left:270px; top:230px; position:fixed; left:250px; var a=2; var timer=setInterval(s,3000); function s if(a3) if(a=1) if(a=2) / alert(2); $(document).ready(function $(document).ready(function $(.im
4、age).attr(src,1.jpg); ); $(#but1).css(background-color,blue); $(#but3).css(background-color,); $(#but2).css(background-color,); a=1; ; $(.image).attr(src,2.jpg); ); $(#but1).css(background-color,); $(#but3).css(background-color,); $(#but2).css(background-color,blue); if(a=3) / alert(3); a+; $(docume
5、nt).ready(function $(.image).attr(src,3.jpg); ); $(#but2).css(background-color,); $(#but3).css(background-color,blue); $(#but1).css(background-color,); $(document).ready(function $(#but1).click(function $(.image).attr(src,1.jpg); $(#but1).css(background-color,blue); $(#but2).css(background-color,);
6、$(#but3).css(background-color,); a = 2; ); ); $(document).ready(function $(#but2).click(function $(.image).attr(src,2.jpg); $(#but2).css(background-color,blue); $(#but1).css(background-color,); $(#but3).css(background-color,); a=3; ); ); $(document).ready(function $(#but3).click(function $(.image).attr(src,3.jpg); $(#but1).css(background-color,); $(#but2).css(background-color,); $(#but3).css(background-color,blue); a=1; ); ); 1 2 3 id=but1
