做一个简易的图片切换代码
网上大佬些的代码我感觉还是对于我这种新手太难了,光看布局就看了好久,我这就写了个自己做的超级简单的纯js代码,
var i =1; //作为一个循环的数
//通过点击切换
function qie(number) { //这个函数是绑定在点击切换的按钮上的onclick
if(number==1){i--;} //number是html传入的值,1是向后切换,传入2是向前切换
if(i<1){i=5;}
if(number==2){i++;}
if(i>5){i=1;}
document.getElementById('bbb').src=("ima/"+i+".jpg");
//bbb是图片显示位置所在dom节点的id,src后面的是jpg,
//你放的图片的格式必须都要是一样的,如果是png就改成png就ok了,并且注意!!
//这里因为用的是数字循环,图片的文件名前缀必须是数字1 2 3 4 5,例如依次是1.jpg,2.jpg...5.jpg
//代码中只是举了五张图片的例子,想要多加,你得看懂代码再修改
}
//通过setInterval自动循环
setInterval(zhidong,5000);//5s切换一次
function zhidong() {
i++;
if(i>5){i=1;} //循环到最后一张的时候回到起点
document.getElementById('bbb').src=("ima/"+i+".JPG");
}
html
<img id="bbb" src="ima/1.jpg"></img> //这是放图片的容器的样式,宽高自己定
<button onclick="qie(1)"></button> //切换按钮
<button onclick="qie(2)"></button> //切换按钮
可以实现图片的自动切换和点击切换
图片放在html同级目录下的ima文件夹下,并且图片的文件名必须是1.jpg,2.jpg依次的数字,后缀的名也要一样,如果照搬文中代码,图片必须凑满5张
2019.12.24最后修改
虽然一年多的学习有更多先进 的方法
但是依照之前切换方式作出优化,但也就那样吧。。
var s = [
'aaa.jpg', //在这个s数组中依次可加入图片的文件名
'ksksk.png'
]
var i = 0 ; //循环数
//自动切换
setInterval(()=>{
i++;
if(i>s.length-1){i = 0}
document.getElementById('bbb').src=`ima/${s[i]}`; //ima是图片路径,可以改的
//注意这里用的是反引号取值,不是jq,不要搞错了
}
,5000)
//通过点击切换
function qie(number) {
if(number==1){i--;}
if(i<1){i=5;}
if(number==2){i++;}
if(i>5){i=1;}
document.getElementById('bbb').src=`ima/${s[i]}`
}
新的代码用到原理是一样的,现在的眼光来看,总的来说这种方法不是特别好,图片过大或者网不好我估计会出bug;