方式一
1.先将图片信息封装成一个数组的全局变量。
2.创建一个全局变量 i 用于操作数组的下标。
3.点击上、下一个按钮时,触发函数,使 i 自增或自减
4.通过字符串拼接的方式,拼接 url。
js代码:
<script type="text/javascript">
//images 用于存储图片信息。可通过下标获取
var images = [
"01.webp",
"02.webp",
"03.jpg",
"04.webp",
];
var i = 0;//用于操作数组的下标
//点击下一个按钮时,触发的函数。
function next(){
i++;
i = i>images.length-1 ? 0:i ;//控制i的范围在 数组元素的取值范围内。实现循环播放
update(i);
}
function prev(){
i--;
i = i<0 ? images.length-1 : i ;//控制i的范围在 数组元素的取值范围内。实现循环播放
update(i);
}
//接收不同的下标,将对应下标的图片,写进url。
function update(n){
var div = document.getElementById("pic_show");
div.style.backgroundImage="url(img/"+images[i]+")" ;
}
</script>
效果截图
方式二
根据定位。
通过dom操作元素的位置,实现轮播。
js代码
<script type="text/javascript">
var arr = document.getElementsByClassName("show_pic");//获取显示图片的元素。
var brr = new Array(arr.length); //创建一个数组用来保存图片的定位信息。
//点击下一个按钮时触发
function next(){
//为brr赋值
for(var i=0;i<=arr.length-1;i++){
brr[i] = arr[i].offsetLeft - 220 ;//获取元素的位置信息,并且改变
//控制图片的循环播放
if (brr[i] < -200 ){
brr[i] += 1320;
}
//console.log(brr[i]);
}
//重写元素的位置
for(var i =0;i<=brr.length-