javascript图片轮播,js简单实现图片轮播

JavaScript图片轮播时，点击下面小图时，如何做到与时间同步切换（把b变量改为点击图片的num）？求大神~

看这代码和你的意思，3秒切换一张图片，循环切换，当点击小图片时，是想立刻显示当前点击的图片。实现思路：对下面的小图片添加点击事件，在循环执行切换时要判断。伪代码如下：

function update(index){

    //在这块写changeimg方法的代码，作用只是显示index这张图片

}

//定义变量

var current = 1；//当前显示的图片

var isRun = true; //是否进行切换图片，此变量是为点击小图片显示而准备

//循环执行，切换图片

function showImage(){

    setTimeout(showImage, 3000);

    if(isRun){

        update(index++);

    }

}

//小图片添加点击事件,逐个添加事件

img.addEventListener("click", doClick（i）, false);

img.addEventListener("mouseout", continueLoop, false);

//以上为示例，其他自行添加，i为小图片的顺序号，也就是需要显示图片的名称

//

function doClick(i){

    isRun = false;

    index = i;

    update(index);

}

//

function continueLoop(){

    isRun = true;

}

//最后，初始化完毕，调用循环方法

showImage();

大意就这样，当鼠标离开，继续循环，点击停止循环，注意事件添加。以上代码不保证完全正确，一般不用纯js开发，所以不是很熟，见谅！

相关问答

Q1: JS制作轮播图

轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。

工具/材料

Sublime Text

01

首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容

02

然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示

03

接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript

04

最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换

Q2: JS图片轮播的原理。。。

script type="text/javascript"

var t = n = 0, count;

$(document).ready(function(){

count=$("#ban_list a").length;//获取图片数目

$("#ban_list a:not(:first-child)").hide();//除第一张图片都隐藏

$("#ban_info").html($("#ban_list a:first-child").find("img").attr('alt'));//这个是把alt里的内容作为标题

$("#ban_info").click(function(){window.open($("#ban_list a:first-child").attr('href'), "_blank")});//给标题绑定点击事件，添加链接

$("#ban li").click(function() { //按钮点击事件

var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4

n = i;

if (i = count) return;

$("#ban_info").html($("#ban_list a").eq(i).find("img").attr('alt'));//重新获取标题

$("#ban_info").unbind().click(function(){window.open($("#ban_list a").eq(i).attr('href'), "_blank")})//重新绑定标题点击事件

$("#ban_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);//渐进渐出效果

document.getElementById("ban").style.background="";

$(this).toggleClass("on");//切换按钮样式

$(this).siblings().removeAttr("class");

});

t = setInterval("showAuto()", 4000);

$("#ban").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

})//鼠标指上停止轮播

function showAuto()//实现轮播的函数

{

n = n =(count - 1) ? 0 : ++n;

$("#ban li").eq(n).trigger('click');

}

/script

div id="ban"

div id="ban_bg"/div

div id="ban_info"/div

ul

li class="on"1/li

li2/li

li3/li

/ul

div id="ban_list"

a href="/Item/Show.asp?m=1d=3824" target="_blank"img src="/UploadFiles/2012-08/admin/2012081511562273110.jpg" alt="" width="414" height="286" //a

/div

Q3: 浅谈js写轮播图的思路与心得

1 、 首先我们需要在开始时将我们锁需要的封装函数链接进来。

列如 script type="text/javascript" src="animate-2.0.1.js"/script

而且我们必须得得到所有需要用到的对象用 getElementById 、getElementsByTagName，然后把需要一个规范的命名。

2 、第二部我们创建一个定时器先让轮播图中所有图片的 li 动起来

右边点击函数跟定时器所运动的函数一个样，所以我们可以封装一个函数abc（）；他们是共用的；

3 、 写出左边点击按钮事件的函数，这样就如上abc（）；差不多只是修改一些东西就行了；

4 、讲小圆点的样式改变封装成一个函数就是下面的chnage（）；

然后还得监听点击每个小圆点的事件，所以可以用for + onclick 讲每个小圆点点击事件给写出来。

难点：

1 、函数截留，当我们点击函数正在执行时，如果多次点击就会出现图片运动混乱的现象，这是我们需要用if(picDiv.isanimated) {return;}，

2 、cloneNode（）函数picUl.appendChild(picLi[0].cloneNode(true))