JS特效实现图片自动播放并可控的效果
不多说了，实现方法请看下面代码。
代码如下：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8"/>
<title>JS代码实现图片自动播放并可控的效果</title><basetarget="_blank"/>
<linkrel="stylesheet"type="text/css"href="http://hovertree.com/texiao/js/1/css/style.css">
<scripttype="text/javascript"src="http://hovertree.com/texiao/js/1/js/koala.min.1.5.js"></script>
<scripttype="text/javascript">
Qfast.add('widgets',{path:"http://hovertree.com/texiao/js/1/js/terminator2.2.min.js",type:"js",requires:['fx']});
Qfast(false,'widgets',function(){
K.tabs({
id:'decoroll2',//焦点图包裹id
conId:"decoimg_a2",//大图域包裹id
tabId:"deconum2",//小圆点数字提示id
tabTn:"a",
conCn:'.decoimg_b2',//大图域配置class
auto:1,//自动播放1或0
effect:'fade',//效果配置
eType:'mouseover',//鼠标事件
pageBt:true,//是否有按钮切换页码
bns:['.prev','.next'],//前后按钮配置class
interval:3000//停顿时间
})
})
</script>
</head>
<body>
<div><ahref="http://hovertree.com">首页</a><ahref="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">原文</a>
<ahref="http://hovertree.com/texiao/">特效库</a>
</div>
<divid="decoroll2"class="imgfocus">
<divid="decoimg_a2"class="imgbox">
<divclass="decoimg_b2">
<ahref="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">
<imgsrc="http://hovertree.com/texiao/js/1/img/1.jpg">
</a>
</div>
<divclass="decoimg_b2">
<ahref="http://keleyi.com/">
<imgsrc="http://hovertree.com/texiao/js/1/img/2.jpg">
</a>
</div>
<divclass="decoimg_b2">
<ahref="http://hovertree.com/shortanswer/">
<imgsrc="http://hovertree.com/texiao/js/1/img/3.jpg">
</a>
</div>
<divclass="decoimg_b2">
<ahref="http://hovertree.com/guestbook/">
<imgsrc="http://hovertree.com/texiao/js/1/img/4.jpg">
</a>
</div>
</div>
<ulid="deconum2"class="num_a2">
<li><ahref="javascript:void(0)"hidefocus="true"target="_self">杨幂</a></li>
<li><ahref="javascript:void(0)"hidefocus="true"target="_self">范冰冰</a></li>
<li><ahref="javascript:void(0)"hidefocus="true"target="_self">高圆圆</a></li>
<li><ahref="javascript:void(0)"hidefocus="true"target="_self">刘诗诗</a></li>
</ul>
</div>
<br/>
</body>
</html>
以上代码就是用JS实现图片自动播放并可控的效果，希望对大家有所帮助。