主要問題是這樣的，添加了setInterval做自動播放，鼠標移入時停止播放，移出繼續(xù)播放。問題一：當鼠標移入停止，移出繼續(xù)播放時卻又從頭開始播放了，并不是接著下一張圖片切換。問題二：當手動切換圖片時，并不是自動播放下一張圖片，而是切換到自動播放的下一張圖片，例如，當自動播放到第三張時，手動切換到第一張圖片，然后就接著自動切換到第四張圖片了。這些問題該如何解決？我的思路就是先判斷獲取當前的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))
???);
????}
/*當前展現(xiàn)狀態(tài)*/
.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.定義數(shù)據(jù)
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.通用函數(shù)
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歷遍所有數(shù)據(jù)，構(gòu)建最終輸出的?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();
????}
跟著視頻把效果都搞出來了，還加了自動播放，也能實現(xiàn)了，但是發(fā)現(xiàn)鼠標移入移出之后就有BUG了。
手刃情人
2016-06-14 23:50:43
