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实现图片自动播放并可控的效果，希望对大家有所帮助。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短