利用计时器 css 等实现 简单的照片轮播效果,求大神 指点指点
再讲讲 如何实现 加点注释 谢谢 我是 菜鸟
<!DOCTYPE html>
轮播
content="text/html; charset=utf-8">
<br> .ad{<br> border: 1px solid #ddd;<br> /* 与图片大小一致 <em>/<br> width: 480px;<br> height: 360px;<br> margin: 0;<br> padding: 0;<br> }<br> .ad li{<br> list-style-type: none;<br> width: 480px;<br> height: 360px;<br> padding: 0;<br> margin: 0;<br> }<br> .show{/</em> 显示 <em>/<br> display: block;<br> }<br> .hide{/</em> 隐藏 <em>/<br> display: none;<br> }<br>
<br> /</em> 利用定时器,定时关闭显示图片 */<br> var timer;<br> var index = 0;//下一个图片的序号<br> function start(){<br> if(!timer){<br> timer = setInterval(function(){<br> //找到全部的 li 全部设置为hide<br> //找到下一个?设置 show<br> var ul = document<br> .getElementById("ad");<br> //找到ul中的全部li子元素<br> var li = <br> ul.getElementsByTagName("li");<br> for(var i=0; i<li.length; i++){<br> li[i].className="hide";<br> }<br> index++;<br> li[index%li.length]<br> .className="show";<br> }, 1000);<br> }<br> }<br> function stop(){<br> if(timer){<br> clearInterval(timer);<br> timer = null;<br> }<br> }<br>
<!-- onload 在页面加载完毕以后执行 -->
轮播
<!-- onmouseover 事件在鼠标出现元素上的时候执行,onmouseout鼠标离开时候执行 -->
onmouseover="stop();" onmouseout="start();">




无非就是设置scrollLeft,scrollTop,opacity等实现移动和透明转换效果之类的
jquery焦点图
模仿淘宝,拍拍图片效果
通过定时器更换指定图片的显示或隐藏即可。
你可以写一个定时器,将图片进行定时的显示和隐藏