阿静童学 2022-04-09 08:57 采纳率: 70%
浏览 66
已结题

用js实现小图片自动切换大图片

问题遇到的现象和发生背景

我想给轮播图小图片换大图片自动播放,可是我的自动播放代码不起作用

问题相关代码,请勿粘贴截图

//自动播放-->轮播图处要没有错误,才可以执行
//定义一个变量表示当前要显示的图片下标
var index=0;
//定义一个定时器
var intervalId
//样式重置函数,每次跳转都要执行一次
function clean(){
for(var i=0;i<imgs.length;i++){
//当下标大于4的时候,则index还原为0
if(index>4){
index=0;
}
//显示当前下标的图片
lis[index].className='bg';//图片变暗
//重置样式
}
//当前照片显示
// var Box=document.querySelector('.Box');
// Box.style.backgroundImage='url(' +this.src+')';
lis[index].className='';
}
//自动播放
run()
function run(){
//设置一个定时器
intervalId=setInterval(function(){
index++;
clean();
},100)
}
lis.onmouseover=function(){
//鼠标悬浮时清除定时器
clearInterval(intervalId)
}

    lis.onmouseout=function(){
        //鼠标离开时再加上定时器
        run();
    }
运行结果及报错内容

我的自动播放代码不起作用

我的解答思路和尝试过的方法
我想要达到的结果

可以想轮播图一样自动播放,但是不要把小图片隐藏起来

  • 写回答

3条回答 默认 最新

  • 关注

    clean方法的循环语句没什么用吧,可以删除

    
    function clean(){
        if(index>4){
            index=0;
        }
       //显示当前下标的图片
       lis[index].className='bg';//图片变暗
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月17日
  • 已采纳回答 4月9日
  • 创建了问题 4月9日

悬赏问题

  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分