建站
咨询
售后
建站咨询
JavaScript图片轮播时，点击下面小图时，如何做到与时间同步切换（把b变量改为点击图片的num）？求大神~
看这代码和你的意思，3秒切换一张图片，循环切换，当点击小图片时，是想立刻显示当前点击的图片。实现思路：对下面的小图片添加点击事件，在循环执行切换时要判断。伪代码如下：
创新互联公司于2013年开始，先为北碚等服务建站，北碚等地企业，进行企业商务咨询服务。为北碚企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
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开发，所以不是很熟，见谅！
JS制作轮播图
轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料
Sublime Text
01
首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02
然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03
接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04
最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
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
浅谈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))
网站名称：javascript图片轮播,js简单实现图片轮播
地址分享：http://scyingshan.cn/article/dsdgidh.html
