原生js写轮播图效果
2024-10-15 06:29:26
<script> var picarr=[
"pic/lb1.jpg",
"pic/lb2.jpg",
"pic/lb3.jpg",
"pic/lb4.jpg"
]; //全局变量index控制当前所在第几张图片
var index=;
var timer;
var radiobtn= document.getElementsByClassName("tubiao")[].getElementsByTagName("span"); function autochang(index) {
var index=parseInt(index);
document.getElementsByClassName("content_1")[].style.backgroundImage="url("+picarr[index]+")";
for(var j=;j<radiobtn.length;j++){
radiobtn[j].className="";
}
radiobtn[index].className="actived";
} function change(index){
setInterval("autochang((index++)%radiobtn.length);",);
} //页面加载成功初始效果
change(index); //当鼠标点击点点的时候切换效果
for(var i=;i<radiobtn.length;i++){
radiobtn[i].index = i;
radiobtn[i].onclick=function () {
clearInterval(timer);
autochang(this.index);
index=this.index;
}
} //点击左箭头
document.getElementsByClassName("left_jiantou")[].onclick=function(){
index--;
if(index<){
index=radiobtn.length-;
}
autochang(index);
} //点击右箭头
document.getElementsByClassName("right_jiantou")[].onclick=function(){
index++;
if(index>=radiobtn.length){
index=;
}
autochang(index);
}
</script>
最新文章
- 移动Web利器transformjs入门
- linux命令grep及正则表达式
- adb shell
- css编写的时候注意什么
- QQ微信与智能家电连接一起 小马哥";连接一切";野心凸显
- CSRF(跨站请求伪造)攻击方式
- Linux的安装 CentOS-7.1
- spoj 39
- Node.js 集群
- Memcached - Base
- 云计算openstack共享组件(2)——Memcache 缓存系统
- Linux基础入门-Linux下软件安装
- Swoft 容器使用
- MM-移动类型
- cp/tar/用c语言编写程序 实现cp命令的效果
- semantic-ui 按钮
- vue 父子组件
- MFC+mongodb+nodejs 数据库的读取与写入操作
- HDU2157(SummerTrainingDay05-F dp)
- vue.js $refs和$emit 父子组件交互