初入小白一枚,遇到一个兼容问题:
写的轮播图,在win8系统下的ie11浏览器效果不能正常显示,具体问题为:
1.鼠标浮动到轮播上仍然继续轮播,不会停顿;
2.轮播图片不能正常显示,不能100%显示。
//循环变量 var m = 1; var speed = 3000; //定时函数 function run(){ if (m > 4) { m = 0; } controlImage(m); m ++; } //定时调用 var timer = setInterval(run, speed); //图片 图标 控制函数 function controlImage(n){ $(".imglist li").eq(n).addClass("current").siblings('li').removeClass("current"); $(".iconlist li").eq(n).addClass("current").siblings('li').removeClass("current"); } //绑定事件 $(".play_box").mouseenter(function(){ clearInterval(timer); //给控制图标绑定事件 $(".iconlist li").mouseenter(function(){ controlImage($(this).index()); m = $(this).index() + 1; }); //左右图标显示 $("#slide_box").show(); }).mouseleave(function(){ timer = setInterval(run, speed); //左右图标隐藏 $("#slide_box").hide(); }); //左右 图片 切换 --向右 下一张图片 $(".slidebar.right").click(function(){ if (m > 4) { m = 0; } controlImage(m); m ++; }); //上一张 $(".slidebar.left").click(function(){ m -= 2; if (m < 0) { m = 4; } controlImage(m); m ++; })
<div id="play" class="play_box"> <div class="imglist"> <ul> <li><img src="index/img_01.jpg" alt="no-img"></li> <li><img src="img/index/22-01.jpg" alt="no-img"></li> <li><img src="img/index/img_03.jpg" alt="no-img"></li> <li><img src="img/index/img_04.jpg" alt="no-img"></li> <li><img src="img/index/img_05.jpg" alt="no-img"></li> </ul> </div> <div class="iconlist"> <ul> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="slide_box"> <div class="slidebar left" id="left_slide"><img src="images/yousit.png" alt=""></div> <div class="slidebar right" id="right_slide"><img src="images/zuo.png" alt=""></div> </div> </div>