跟着视频把效果都搞出来了，还加了自动播放，也能实现了，但是发现鼠标移入移出之后就有BUG了。
主要问题是这样的，添加了setInterval做自动播放，鼠标移入时停止播放，移出继续播放。
问题一：当鼠标移入停止，移出继续播放时却又从头开始播放了，并不是接着下一张图片切换。
问题二：当手动切换图片时，并不是自动播放下一张图片，而是切换到自动播放的下一张图片，
例如，当自动播放到第三张时，手动切换到第一张图片，然后就接着自动切换到第四张图片了。
这些问题该如何解决？
我的思路就是先判断获取当前的index的值，然后将 n = index的值。
不过该怎么获取当前index的值？
代码如下，希望能有人帮我测试一下：
<body>
<div class="top_p">
<h1>ELASTIC IMAGE SLIDESHOW WITH THUMBNAIL PREVIEW</h1>
</div>
<div class="slider">
<div class="main" id="tem_main">
<div class="main_i {{css}}" id="main_{{index}}">
<div class="caption">
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img src="img/{{index}}.jpg" class="picture">
</div>
</div>
<div class="ctrl" id="tem_ctr">
<a href="javascript:add({{index}});" class="ctrl_i" id="ctr_{{index}}" index="{{index}}"><img src="img/{{index}}.jpg"></a>
</div>
</div>
<div class="foot_p">
<p>Demo 1 | Demo2(wiht autoplay)<br/>
Resize the window to see the slider adjusting</p>
</div>
</body>*{margin:0;padding:0;}
body{
padding:50px 0;
background-color:#FFF;
font-size:14px;
font-family:"方正兰亭超细黑简体";
color:#555;
-webkit-font-smoothing:antialiased;
}
.slider,
.main,
.main_i{
width:1280px;
height:500px;
position:relative;
}
.slider{
margin:0 auto;
}
.main{
overflow:hidden;
}
.main_i img{
width:100%;
position:absolute;
top:0;
left:0;
border:none;
}
.main_i .caption{
position:absolute;
top:30%;
right:65%;
z-index:10;
}
.main_i .caption h2{
font-size:40px;
line-height:50px;
color:#B5B5B5;
text-align:right;
}
.main_i .caption h3{
font-size:70px;
line-height:70px;
color:#B5B5B5;
text-align:right;
}
.ctrl{
width:100%;
height:13px;
line-height:13px;
text-align:center;
position:absolute;
left:0;
bottom:-13px;
}
.ctrl .ctrl_i{
display:inline-block;
width:150px;
height:13px;
margin-left:1px;
position:relative;
background-color:#B6B6B6;
box-shadow:0 1px 1px rgba(0,0,0,.3);
}
.ctrl .ctrl_i img{
width:100%;
position:absolute;
left:0;
bottom:50px;
z-index:1;
transition:all .2s;
opacity:0;
}
.ctrl_i:hover{
background-color:#F0F0F0;
}
.ctrl_i:hover img{
bottom:13px;
opacity:1;
z-index:9;
-webkit-box-reflect: below 0 -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%,transparent),
to(rgba(0,0,0,0.8))
);
}
/*当前展现状态*/
.ctrl .ctrl_i_active,
.ctrl .ctrl_i_active:hover{
background-color:#000;
}
.ctrl .ctrl_i_active img{
opacity:0;
}
/*幻灯片切换*/
.main_i{
position:absolute;
right:50%;
top:0;
opacity:0;
transition:all .5s;
z-index:2;
}
.main_i_right{
right:-50%;
}
.main_i h2{
margin-right:45px;
}
.main_i h3{
margin-right:-45px;
}
.main_i h2,
.main_i h3{
transition:all .5s 0.5s;
}
#main_background,
.slider .main_i_active{
opacity:1;
position:absolute;
right:0;
}
#main_background{
z-index:1;
}
.slider .main_i_active h2,
.slider .main_i_active h3{
margin-right:0;
}
.top_p{
width:1600px;
height:50px;
margin:15px auto;
line-height:50px;
text-align:center;
font-size:22px;
font-weight:bold;
font-family:"微软雅黑";
color:#000;
}
.foot_p{
margin:50px auto;
width:1600px;
text-align:center;
line-height:40px;
font-size:22px;
font-weight:bold;
font-family:"微软雅黑";
color:#000;
}//1.定义数据
var data= [
{img:1,h2:'Loving',h3:'REBEL'},
{img:2,h2:'Friendly',h3:'DEVIL'},
{img:3,h2:'Loving',h3:'REBEL'},
{img:4,h2:'Insecure',h3:'HUSSLER'},
{img:5,h2:'Creative',h3:'DUET'},
{img:6,h2:'Passionate',h3:'SEEKER'},
{img:7,h2:'Crazy',h3:'FRTEND'},
];
//2.通用函数
function g(id){
if(id.substr(0,1) == '.'){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
//3.添加所有幻灯片的操作
function addSlider(){
//3.1获取模板
var tpl_main = g('tem_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
var tpl_ctr = g('tem_ctr').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
//3.2定义最终输出 HTML 变量
var out_main = [];
var out_ctr = [];
//3.3历遍所有数据，构建最终输出的 THML
for( i in data){
var _html_main = tpl_main
.replace(/{{index}}/g,data[i].img)
.replace(/{{h2}}/g,data[i].h2)
.replace(/{{h3}}/g,data[i].h3)
.replace(/{{css}}/g,['','main_i_right'][i%2]);
var _html_ctr = tpl_ctr.replace(/{{index}}/g,data[i].img);
out_main.push(_html_main);
out_ctr.push(_html_ctr);
}
//3.4把 HTML 回写到对应的 DOM 里面
g('tem_main').innerHTML = out_main.join('');
g('tem_ctr').innerHTML = out_ctr.join('');
//3.5增加main_background
g('tem_main').innerHTML += tpl_main
.replace(/{{index}}/g,'{{index}}')
.replace(/{{h2}}/g,data[i].h2)
.replace(/{{h3}}/g,data[i].h3);
g('main_{{index}}').id = 'main_background';
}
//4.幻灯片切换
function add(n){
//4.1获取要展示的幻灯片&控制的按钮
var main = g('main_'+n);
var ctr = g('ctr_'+n);
//4.2获取所有幻灯片以及控制按钮,然后清除样式
var clear_main = g('.main_i');
var clear_ctrl = g('.ctrl_i');
for(var i=0; i<clear_ctrl.length; i++){
clear_main[i].className = clear_main[i].className.replace(' main_i_active','');
clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl_i_active','');
}
//4.3为当前幻灯片和控制按钮添加样式
main.className += ' main_i_active';
ctr.className += ' ctrl_i_active';
//4.4切换时，复制上一张幻灯片到 main_background
setTimeout(function(){
g('main_background').innerHTML = main.innerHTML;
},500);
}
//6.0自动播放
var timer;
function play(){
var n=1;
timer = setInterval(function(){
if(n<7){
n++;
}else{
n = 1;
}
add(n);
//console.log(g('main_'+a).getAttribute('id'));
},2000);
}
//7.0停止播放
function stop(){
clearInterval(timer);
}
window.onload = function(){
addSlider();
add(1);
g('tem_main').onmouseover = stop;
g('tem_main').onmouseout = play;
play();
//console.log();
getNumber();
}
手刃情人浏览 1636回答 2
2回答
-
李夜
作用域的问题，当你重新触发 play 函数时，会重新声明变量 n，不能接着上次的下标执行。把 play() 函数中的变量 n 拿出来作为全局变量即可，如下：//6.0自动播放 var timer; var n=1; function play(){ timer = setInterval(function(){ if(n<7){ n++; }else{ n = 1; } add(n); //console.log(g('main_'+a).getAttribute('id')); },2000); } -
黄志明
题主你第二个问题呢？这样就采纳了？白费我关注这么久！
随时随地看视频慕课网APP
Html/CSS
JavaScript