电脑爱好者,提供IT资讯信息及各类编程知识文章介绍,欢迎大家来本站学习电脑知识。 最近更新 | 联系我们 RSS订阅本站最新文章
电脑爱好者
站内搜索: 
当前位置:首页>> Javascript>>javascript实现原生幻灯片代码(文章下篇)增强版带文字变化:

javascript实现原生幻灯片代码(文章下篇)增强版带文字变化

来源:网络 | 2020-2-26 | (有1159人读过)

基础代码请参考上篇文章(下方前后链接中)


改进代码:

HTML部分:

<div id="imgvalue" style="display:none">1</div>
    <img src="image/01.jpg" id="img" onclick="gonext()"/>
<div id="abcd" name="" align="center">
图片欣赏1
</div>



javascript部分:


<script>
var i =0;

function $(id){
return document.getElementById(id);
}
function add(){
i++;//自增变化
$("img").src="image/0"+i+".jpg";//实现对img.src属性控制
$("imgvalue").innerText=i;
$("abcd").innerText="图片欣赏"+i;
if(i>2){   //注意控制图片数量
i=1;
}
setTimeout('add()',3000);  //定时器控制播放时间
}
function gonext(){
a=$("imgvalue").innerText;
b=parseInt(a)+1;
$("img").src="image/0"+b+".jpg";
}
add();//调用函数
</script>

Javascript热门文章排行
网站赞助商
购买此位置

 

关于我们 | 网站地图 | 文档一览 | 友情链接| 联系我们

Copyright © 2003-2024 电脑爱好者 版权所有 备案号:鲁ICP备09059398号