Js图片轮播思路

发布网友发布时间：2022-04-25 15:25

共2个回答

热心网友时间：2022-04-07 06:39

<a href="http://liping.site">js图片轮播效果代码</a>

首先我们需要引入一张图片，通过更改img标签中src的值，达到图片切换功能。
html代码：<img src="http://liping.site/1.jpg" width="331" height="220" id="carousel">
在这我们需要理理自己的思路，一、图片从何而来二、怎么样使图片轮播，能够动起来
自定义一个数组，将需要的图片存在中间，代码如下：
var arr=new Array();

arr[0]='1.jpg';

arr[1]='2.jpg';

arr[2]='3.jpg';

arr[3]='4.jpg';
接着我们需要能够对图片进行操作定义一个函数，
function tImg(){var obj=document.getElementById('carousel');obj.src=''+arr[carIndex];}

准备好以后我们只需要获取数组的下标即可
定义初始化下标：var carIndex=0;
在函数中如果carIndex变量等于数组的字符串长度-1的情况下，赋给carIndex=0的初始数值。不是的情况下carIndex就+或者=1，代码如下：

function tImg(){

var obj=document.getElementById('carousel');

if(carIndex==arr.length-1){

carIndex=0;}

else{

carIndex+=1;}

obj.src=''+arr[carIndex];obj.onmouseover=function(){

}

逻辑关系理清楚后我们下一步就是使他们动起来，我们需要引入setInterval来控制函数的时间，代码如下：
var time=setInterval(tImg,3000);函数3秒执行一次
做到这里我们已经能过使图片进行切换了。

热心网友时间：2022-04-07 07:57

思路啊其实就是恩好吧说常见的几种
1 好几个并列的模块，一个显示其他的隐藏恩你可以使用for循环
2 每个模块都不隐藏，但是可以显示的框的大小是定的，只有在框内的才显示
3 还有一种恩习惯JS会比较喜欢吧就是定时切换图片的链接其实我更喜欢这种

当然都需要定时器