                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實現(xiàn)帶預(yù)覽圖幻燈片效果

自動播放功能

自動播放怎么弄？setInterval，頁面加載完成后加定時器規(guī)定兩秒執(zhí)行switchslider一次，但是每次執(zhí)行都要i+1。做不出來。。

請叫我橙子蛋

2017-03-15

源自：JS+CSS3實現(xiàn)帶預(yù)覽圖幻燈片效果 3-3

關(guān)注問題我要回答

2992

操作

收起

4 回答

XMYL
2019-10-25

<!DOCTYPE?html>

<html?lang="zh-CN">

<head>

????<meta?charset="UTF-8">

????<title>預(yù)覽圖幻燈片</title>

????<style?type="text/css">

????????h1,h2{

????????????margin:0;

????????????padding:0;

????????????font-weight:normal;

????????}

????????html,body{

????????????margin:0;

????????????padding:0;??????

????????}

????????body{

????????????background-color:#fff;

????????????font-size:100%;

????????????color:#555;

????????????-webkit-font-smoothing:antialiased;

????????}

????????.slider{

????????????width:1280px;

????????????margin:0?auto;

????????????position:relative;

????????}

????????.slider?.main{

????????????width:100%;

????????????height:400px;

????????????overflow:hidden;

????????????position:relative;

????????}

????????.slider?.main?.main-i{

????????????position:absolute;

????????????left:-50%;

????????????top:0;

????????????height:400px;

????????????opacity:0;

????????????transition:all?0.5s;

????????????-webkit-transition:all?0.5s;

????????????z-index:2;

????????}

????????.slider?.main?.main-i-right{

????????????left:50%;

????????}

????????#main_background,???????

????????.slider?.main?.main-i-active{

????????????left:0;

????????????opacity:1;

????????}

????????#main_background{

????????????z-index:1;

????????}

????????.slider?.main?.main-i?.caption{

????????????position:?absolute;

????????????right:58%;

????????????top:20%;

????????????text-align:right;

????????????z-index:2;

????????}

????????.slider?.main?.main-i?.caption?h2{

????????????font-size:2.6rem;

????????????line-height:3rem;

????????????color:#b5b5b5;

????????????margin-right:3rem;??????????

????????}

????????.slider?.main?.main-i?.caption?h1{

????????????font-size:4.6rem;

????????????color:#000;

????????????font-family:Impact,?Haettenschweiler,?'Arial?Narrow?Bold',?sans-serif;

????????????margin-right:-5rem;

????????}

????????.slider?.main?.main-i?.caption?h1,

????????.slider?.main?.main-i?.caption?h2{

????????????opacity:0;

????????????transition:all?.8s?1s;

????????????-webkit-transition:all?.8s?.6s;

????????}

????????.slider?.main?.main-i-active?.caption?h1,

????????.slider?.main?.main-i-active?.caption?h2{

????????????opacity:1;

????????????margin-right:0;

????????}

????????.slider?.main?.main-i?img{

????????????display:block;

????????????position:relative;

????????????left:0;

????????????top:50%;

????????????z-index:1;

????????}

????????.slider?.ctrl{

????????????position:absolute;

????????????left:0;

????????????bottom:-13px;

????????????height:13px;

????????????width:100%;

????????????text-align:center;

????????????z-index:9;

????????????font-size:?0;

????????}

????????.slider?.ctrl?.ctrl-i{

????????????display:inline-block;???????????

????????????position:relative;

????????????height:13px;

????????????width:150px;

????????????background-color:#666;

????????????margin-left:1px;

????????????box-shadow:0?1px?1px?rgba(0,0,0,0.3);

????????????transition:all?0.3s;

????????????-webkit-transition:all?0.3s;

????????}

????????.slider?.ctrl?.ctrl-i?img{

????????????display:block;

????????????width:100%;

????????????border:0;

????????????position:absolute;

????????????left:0;

????????????bottom:50px;

????????????transition:all?0.3s;

????????????-webkit-transition:all?0.3s;

????????????opacity:0;

????????????z-index:0;??????????

????????}

????????.slider?.ctrl?.ctrl-i:hover{

????????????background-color:#f0f0f0;

????????}

????????.slider?.ctrl?.ctrl-i:hover?img{

????????????bottom:13px;

????????????opacity:1;

????????????-webkit-box-reflect:below?0px?-webkit-gradient(

????????????????linear,

????????????????left?top,

????????????????left?bottom,

????????????????from(transparent),

????????????????color-stop(50%,transparent),

????????????????to(rgba(255,255,255,0.3))

????????????);

????????}

????????.slider?.ctrl?.ctrl-i-active:hover,

????????.slider?.ctrl?.ctrl-i-active{

????????????background-color:#000;

????????}

????????.slider?.ctrl?.ctrl-i-active:hover?img{

????????????opacity:0;

????????}

????</style>

</head>

<body>

????<div?class="slider">

????????

????????<div?class="main"?id="template_main">

????????????<div?class="main-i?{{css}}"?id="main_{{index}}">

????????????????<div?class="caption">

????????????????????<h2>{{h2}}</h2>

????????????????????<h1>{{h1}}</h1>?????????????????

????????????????</div>

????????????????<img?src="./imgs/{{index}}.jpg"?alt=""?class="slider_pic"?/>

????????????</div>

????????</div>

????????<div?class="ctrl"?id="template_ctrl">

????????????<a?class="ctrl-i"?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});">

????????????????<img?src="./imgs/{{index}}.jpg"?alt=""?/>

????????????</a>

????????</div>

????</div>

????<script?type="text/javascript">

????????var?data=[

????????????{img:1,h1:'DUET',h2:'Creative'},

????????????{img:2,h1:'DEVIL',h2:'Friendly'},

????????????{img:3,h1:'COMPATRIOT',h2:'Tranquilent'},

????????????{img:4,h1:'HUSSLER',h2:'Insecure'},

????????????{img:5,h1:'REBEL',h2:'Loving'},

????????????{img:6,h1:'SEEKER',h2:'Passionate'},

????????????{img:7,h1:'FRIEND',h2:'Crazy'},

????????];

????????var?num=1;

????????//?獲取DOM節(jié)點

????????var?g=function(id){

????????????if(id.substr(0,1)=='.'){

????????????????return?document.getElementsByClassName(id.substr(1));

????????????}

????????????

????????????return?document.getElementById(id);

????????????

????????}

????????//?添加幻燈片的操作及對應(yīng)的按鈕

????????function?addSliders(){

????????????var?tpl_main=g('template_main').innerHTML

????????????????????????????.replace('/^\s*/','')

????????????????????????????.replace('/\s*$/','');

????????????var?tpl_ctrl=g('template_ctrl').innerHTML

????????????????????????????.replace('/^\s*/','')

????????????????????????????.replace('/\s*$/','');

????????????

????????????//?定義最終輸出的HTML的變量

????????????var?out_main=[],

????????????????out_ctrl=[];

????????????

????????????//?遍歷數(shù)據(jù)

????????????for(i?in?data){

????????????????var?_html_main=tpl_main

????????????????????????????????.replace(/{{index}}/g,data[i].img)

????????????????????????????????.replace(/{{css}}/g,['','main-i-right'][i%2])

????????????????????????????????.replace(/{{h1}}/g,data[i].h1)

????????????????????????????????.replace(/{{h2}}/g,data[i].h2);

????????????????var?_html_ctrl=tpl_ctrl

????????????????????????????????.replace(/{{index}}/g,data[i].img);

????????????????

????????????????out_main.push(_html_main);

????????????????out_ctrl.push(_html_ctrl);

????????????}

????????????g('template_main').innerHTML=out_main.join('');

????????????g('template_ctrl').innerHTML=out_ctrl.join('');

????????????//?加一背景圖片

????????????g('template_main').innerHTML+=tpl_main

????????????????????????????????.replace(/{{h1}}/g,data[0].h1)

????????????????????????????????.replace(/{{h2}}/g,data[0].h2);

????????????g('main_{{index}}').id="main_background";

????????}

????????//?幻燈片切換

????????function?switchSlider(n){

????????????num=n;

????????????console.log(num);

????????????var?main=g('main_'+n);

????????????var?ctrl=g('ctrl_'+n);

????????????var?clear_main=g('.main-i');

????????????var?clear_ctrl=g('.ctrl-i');

????????????for(i=0;i<clear_ctrl.length;i++){

????????????????clear_ctrl[i].className=clear_ctrl[i].className.replace('?ctrl-i-active','');

????????????????clear_main[i].className=clear_main[i].className.replace('?main-i-active','');

????????????}

????????????main.className+='?main-i-active';

????????????ctrl.className+='?ctrl-i-active';

????????????//?切換的時候把當前的圖添加到背景圖

????????????setTimeout(function(){

????????????????g('main_background').innerHTML=main.innerHTML;

????????????},1000);

????????????

????????}

????????//?調(diào)整圖片位置

????????function?movePics(){

????????????var?slider_pics=g('.slider_pic');???????????

????????????for(i=0;?i<slider_pics.length;i++){

????????????????slider_pics[i].style.marginTop=(-1*slider_pics[i].clientHeight/2)+'px';

????????????}

????????}

????????//自動播放

????????function?autoPlay(){????????????????????????

????????????setInterval(function(){

????????????????console.log(num);

????????????????switchSlider(num);

????????????????num++;

????????????????if(num>7){

????????????????num=1;

????????????????}

????????????},3000);

????????????

????????}

????????//?定義何時處理幻燈片輸出

????????window.onload=function(){

????????????addSliders();

????????????setTimeout(function(){

????????????????movePics();

????????????},100);?????????

????????????switchSlider(1);

????????????autoPlay();

????????}

????</script>

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

XMYL
2019-10-25

var num=1 //全局變量，記錄當前播放的幻燈片

var num=1; //定義為全局變量

switchSlide(s){
????num=s //在切換幻燈片方法中，手動點擊，改變?nèi)肿兞恐担员阕詣硬シ旁邳c擊處開始播放
}

//定義自動播放方法
function?autoPlay(){
????setInterval(function(){
????????switchSlider(num);
????????num++;
????????if(num>7){
????????????num=1;
?????????????} },3000); //定時自動切換
}

//在DOM加載后，執(zhí)行自動播放方法
window.onload=function(){
????autoPlay();
｝

//測試，完美自動播放

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

請叫我橙子蛋提問者
2017-03-16

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Preview?Slideshow</title>
<style>
*{
padding:0;
margin:?0;
}
body{
padding:50px?0;
background-color:?#fff;
font-size:14px;
font-family:'Avenir?Next';
color:#555;
-webkit-font-smoothing:antialiased;
/*字體抗鋸齒*/
}
.slider?.ctrl?.ctrl-i,
.slider?.main?.main-i,
.slider?.main,
.slider{
width:?100%;
height:?460px;
position:relative;
}
.slider?.main{
overflow:?hidden;

}

.slider?.main?.main-i?img{
width:?100%;
position:absolute;
left:?0;
top:50%;
}
.slider?.main?.main-i?.caption{
position:?absolute;
right:?50%;
top:?30%;
z-index:?9;
}
.slider?.main?.main-i?.caption?h2{
font-size:?40px;
line-height:?50px;
color:?#b5b5b5;
text-align:?right;
}
.slider?.main?.main-i?.caption?h3{
text-align:?right;
font-size:?70px;
line-height:?70px;
color:?#000;
font-family:?'Open?Sans?Condensed';
}
.slider?.main?#main_background{
z-index:?1
}
.slider?.ctrl{
width:?100%;
height:?13px;
line-height:?13px;
text-align:?center;
position:?absolute;
left:?0;
bottom:?-13px;
}
.slider?.ctrl?.ctrl-i{
display:?inline-block;
width:?150px;
height:?13px;
background-color:?#666;
box-shadow:?0?1px?1px?rgba(0,0,0,.3);
z-index:?10;
margin-left:?1px;
}
.slider?.ctrl?.ctrl-i?img{
width:?100%;
position:?absolute;
left:?0;
bottom:?50px;

}
/*制作鼠標經(jīng)過ctrl的效果*/
.slider?.ctrl?.ctrl-i:hover{
background-color:?#f0f0f0;
box-shadow:?0?1px?1px?rgba(0,0,0,.3);
}
.slider?.ctrl?.ctrl-i:hover?img{
bottom:?13px;
transition:?all?.3s?ease-in-out;
-webkit-box-reflect:below?0?-webkit-gradient(
linear,
left?top,
left?bottom,
from(transparent),
color-stop(50%,transparent),
to(?rgba(255,255,255,.3))
);
}

.slider?.ctrl?.ctrl-i-active,
.slider?.ctrl?.ctrl-i-active:hover{
background-color:?#000;
}
.slider?.ctrl?.ctrl-i:hover?img{
opacity:?1;
}
.slider?.ctrl?.ctrl-i?img,
.slider?.ctrl?.ctrl-i-active?img,
.slider?.ctrl?.ctrl-i-active:hover?img{
opacity:?0;
}
.slider?.main?.main-i?.caption{
margin-right:?13%;
}
.slider?.main?.main-i?.caption?h2{
margin-right:?45px;
}
.slider?.main?.main-i?.caption?h3{
margin-right:?-45px;
}
#main_background,
.slider?.main?.main-i-active{
right:?0;
opacity:?1;
z-index:?2;
}
#main_background{
z-index:?1;
}
.slider?.main?.main-i-active?.caption?h2,
.slider?.main?.main-i-active?.caption?h3{
margin-right:0;
transition:?all?1s?0.8s;
-moz-transition:?all?1s?0.8s;?/*?Firefox?4?*/
-webkit-transition:?all?1s?0.8s;?/*?Safari?和?Chrome?*/
-o-transition:?all?1s?0.8s;?/*?Opera?*/
}
.slider?.main?.main-i-active?img{
position:?absolute;
right:?50%;
top:?50%;
/*margin-top:?50%;*/
}

/*設(shè)置幻燈片的樣式*/
.slider?.main?.main-i?{
position:?absolute;
right:?50%;
top:?0;
opacity:?0;
z-index:?2;
}
.slider?.main?.main-i-right{
right:?-50%;
}
.slider?.main?.main-i-active{
transition:?all?0.8s;
-moz-transition:?all?0.8s;?/*?Firefox?4?*/
-webkit-transition:?all?0.8s;?/*?Safari?和?Chrome?*/
-o-transition:?all?0.8s;?/*?Opera?*/
opacity:?1;
right:?0;
}

</style>
<script>
var?data=[{img:'1',h1:'簡單點',h2:'說話的方式簡單點'},
{img:'2',h1:'遞進的情緒請省略',h2:'你又不是個演員'},
{img:'3',h1:'別設(shè)計那些情節(jié)',h2:'沒意見'},
{img:'4',h1:'我只想看看你怎么圓',h2:'你難過的太表面'},
{img:'5',h1:'像沒天賦的演員',h2:'觀眾一眼能看見'},
{img:'6',h1:'該配合你演出的我',h2:'演視而不見'},
{img:'7',h1:'別逼一個最愛你的人',h2:'即興表演'}
];
function?g(id){
if(id.substr(0,1)=='.'){
return?document.getElementsByClassName(id.substr(1));
}else{
return?document.getElementById(id);
}
}
function?AddSliders(){
var?tpl_main?=?g('template_main').innerHTML;
var?tpl_ctrl?=?g('template_ctrl').innerHTML;
var?html_main?=?tpl_main.replace(/^\s*/,'').replace(/\s*$/,'');
var?html_ctrl?=?tpl_ctrl.replace(/^\s*/,'').replace(/\s*$/,'');
//?alert(html_main);
var?out_main?=?[];
var?out_ctrl?=?[];
for(i?in?data){
add_main?=?html_main.replace(/{{index}}/g,data[i].img)
.replace(/{{H2}}/g,data[i].h1)
.replace(/{{H3}}/g,data[i].h2)
.replace(/{{css}}/g,['','main-i-right'][i%2]);
add_ctrl?=?html_ctrl.replace(/{{index}}/g,data[i].img);
//在數(shù)組的末尾添加add_main并用逗號分隔
out_main.push(add_main);
out_ctrl.push(add_ctrl);
}
//這里要使用join('')來替換掉自動會生成的','
g('template_main').innerHTML?=?out_main.join('');
g('template_ctrl').innerHTML?=?out_ctrl.join('');
g('template_main').innerHTML?+=?html_main.replace(/{{index}}/g,'{{index}}')
.replace(/{{H2}}/g,data[i].h1)
.replace(/{{H3}}/g,data[i].h2);
g('main_{{index}}').id?=?'main_background';
}

function?switchSlide(s){
var?show_main?=?g('main_'+s);
var?show_ctrl?=?g('ctrl_'+s);
var?clear_main?=?g('.main-i');
?????????var?clear_ctrl?=?g('.ctrl-i');
for?(var?i?=?0;?i?<?g('.ctrl-i').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','');
}
show_main.className?+=?'?main-i-active';
?????????show_ctrl.className?+=?'?ctrl-i-active';
setTimeout(function(){
g('main_background').innerHTML?=?show_main.innerHTML;
},1000)
n=parseInt(show_main.id.substr(5));
}
function?setImgheight(){
var?pictures?=?g('.picture');
for?(var?i?=?0;?i?<?pictures.length;?i++)?{
pictures[i].style.marginTop?=?(-1*pictures[i].clientHeight/2)+'px';
}
}
var?n;
function?autoplay(){
switchSlide(n);
n++;
if(n>7){
n=1;
}
}
window.onload?=?function(){
AddSliders();
setTimeout(function(){
setImgheight();
},100)
//頁面加載時執(zhí)行第一張圖的點擊效果，5秒后調(diào)用自動播放函數(shù)，再過兩秒切換到第一張，再過兩秒切第二張
switchSlide(1);
setInterval(function(){
autoplay();
},4000)
}

</script>
</head>
<body>
<div>

<div?id="template_main">
<div?class="main-i?{{css}}"?id="main_{{index}}">
<div>
<h2>{{H2}}</h2>
<h3>{{H3}}</h3>
</div>
<img?src="imgs/{{index}}.jpg"?alt="">
</div>
</div>

<div?id="template_ctrl">
<a?id="ctrl_{{index}}"?href="javascript:switchSlide({{index}});">
<img?src="imgs/{{index}}.jpg"?alt="">
</a>
</div>

</div>
</body>
</html>

這樣放代碼好像才能用

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

請叫我橙子蛋提問者

好像還是不行

2017-03-16 回復(fù) 有任何疑惑可以回復(fù)我~

請叫我橙子蛋提問者
2017-03-16

走了一個循環(huán)遍歷改變I值然后延時觸發(fā)點擊事件的彎路，發(fā)現(xiàn)循環(huán)它不會等你動畫執(zhí)行完再加一。后來設(shè)全局變量解決的，本人菜雞，代碼肯定還能優(yōu)化。

<!DOCTYPE html>

<html>

<head>

<title>Preview Slideshow</title>

<style>

*{

padding:0;

margin: 0;

}

body{

padding:50px 0;

background-color: #fff;

font-size:14px;

font-family:'Avenir Next';

color:#555;

-webkit-font-smoothing:antialiased;

/*字體抗鋸齒*/

}

.slider .ctrl .ctrl-i,

.slider .main .main-i,

.slider .main,

.slider{

width: 100%;

height: 460px;

position:relative;

}

.slider .main{

overflow: hidden;

}

.slider .main .main-i img{

width: 100%;

position:absolute;

left: 0;

top:50%;

}

.slider .main .main-i .caption{

position: absolute;

right: 50%;

top: 30%;

z-index: 9;

}

.slider .main .main-i .caption h2{

font-size: 40px;

line-height: 50px;

color: #b5b5b5;

text-align: right;

}

.slider .main .main-i .caption h3{

text-align: right;

font-size: 70px;

line-height: 70px;

color: #000;

font-family: 'Open Sans Condensed';

}

.slider .main #main_background{

z-index: 1

}

.slider .ctrl{

width: 100%;

height: 13px;

line-height: 13px;

text-align: center;

position: absolute;

left: 0;

bottom: -13px;

}

.slider .ctrl .ctrl-i{

display: inline-block;

width: 150px;

height: 13px;

background-color: #666;

box-shadow: 0 1px 1px rgba(0,0,0,.3);

z-index: 10;

margin-left: 1px;

}

.slider .ctrl .ctrl-i img{

width: 100%;

position: absolute;

left: 0;

bottom: 50px;

}

/*制作鼠標經(jīng)過ctrl的效果*/

.slider .ctrl .ctrl-i:hover{

background-color: #f0f0f0;

box-shadow: 0 1px 1px rgba(0,0,0,.3);

}

.slider .ctrl .ctrl-i:hover img{

bottom: 13px;

transition: all .3s ease-in-out;

-webkit-box-reflect:below 0 -webkit-gradient(

linear,

left top,

left bottom,

from(transparent),

color-stop(50%,transparent),

to( rgba(255,255,255,.3))

);

}

.slider .ctrl .ctrl-i-active,

.slider .ctrl .ctrl-i-active:hover{

background-color: #000;

}

.slider .ctrl .ctrl-i:hover img{

opacity: 1;

}

.slider .ctrl .ctrl-i img,

.slider .ctrl .ctrl-i-active img,

.slider .ctrl .ctrl-i-active:hover img{

opacity: 0;

}

.slider .main .main-i .caption{

margin-right: 13%;

}

.slider .main .main-i .caption h2{

margin-right: 45px;

}

.slider .main .main-i .caption h3{

margin-right: -45px;

}

#main_background,

.slider .main .main-i-active{

right: 0;

opacity: 1;

z-index: 2;

}

#main_background{

z-index: 1;

}

.slider .main .main-i-active .caption h2,

.slider .main .main-i-active .caption h3{

margin-right:0;

transition: all 1s 0.8s;

-moz-transition: all 1s 0.8s; /* Firefox 4 */

-webkit-transition: all 1s 0.8s; /* Safari 和 Chrome */

-o-transition: all 1s 0.8s; /* Opera */

}

.slider .main .main-i-active img{

position: absolute;

right: 50%;

top: 50%;

/*margin-top: 50%;*/

}

/*設(shè)置幻燈片的樣式*/

.slider .main .main-i {

position: absolute;

right: 50%;

top: 0;

opacity: 0;

z-index: 2;

}

.slider .main .main-i-right{

right: -50%;

}

.slider .main .main-i-active{

transition: all 0.8s;

-moz-transition: all 0.8s; /* Firefox 4 */

-webkit-transition: all 0.8s; /* Safari 和 Chrome */

-o-transition: all 0.8s; /* Opera */

opacity: 1;

right: 0;

}

</style>

var data=[{img:'1',h1:'簡單點',h2:'說話的方式簡單點'},

{img:'2',h1:'遞進的情緒請省略',h2:'你又不是個演員'},

{img:'3',h1:'別設(shè)計那些情節(jié)',h2:'沒意見'},

{img:'4',h1:'我只想看看你怎么圓',h2:'你難過的太表面'},

{img:'5',h1:'像沒天賦的演員',h2:'觀眾一眼能看見'},

{img:'6',h1:'該配合你演出的我',h2:'演視而不見'},

{img:'7',h1:'別逼一個最愛你的人',h2:'即興表演'}

];

function g(id){

if(id.substr(0,1)=='.'){

return document.getElementsByClassName(id.substr(1));

}else{

return document.getElementById(id);

}

function AddSliders(){

var tpl_main = g('template_main').innerHTML;

var tpl_ctrl = g('template_ctrl').innerHTML;

var html_main = tpl_main.replace(/^\s*/,'').replace(/\s*$/,'');

var html_ctrl = tpl_ctrl.replace(/^\s*/,'').replace(/\s*$/,'');

// alert(html_main);

var out_main = [];

var out_ctrl = [];

for(i in data){

add_main = html_main.replace(/{{index}}/g,data[i].img)

.replace(/{{H2}}/g,data[i].h1)

.replace(/{{H3}}/g,data[i].h2)

.replace(/{{css}}/g,['','main-i-right'][i%2]);

add_ctrl = html_ctrl.replace(/{{index}}/g,data[i].img);

//在數(shù)組的末尾添加add_main并用逗號分隔

out_main.push(add_main);

out_ctrl.push(add_ctrl);

}

//這里要使用join('')來替換掉自動會生成的','

g('template_main').innerHTML = out_main.join('');

g('template_ctrl').innerHTML = out_ctrl.join('');

g('template_main').innerHTML += html_main.replace(/{{index}}/g,'{{index}}')

.replace(/{{H2}}/g,data[i].h1)

.replace(/{{H3}}/g,data[i].h2);

g('main_{{index}}').id = 'main_background';

}

function switchSlide(s){

var show_main = g('main_'+s);

var show_ctrl = g('ctrl_'+s);

var clear_main = g('.main-i');

? ? ? ? ?var clear_ctrl = g('.ctrl-i');

for (var i = 0; i < g('.ctrl-i').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','');

}

show_main.className += ' main-i-active';

? ? ? ? ?show_ctrl.className += ' ctrl-i-active';

setTimeout(function(){

g('main_background').innerHTML = show_main.innerHTML;

},1000)

n=parseInt(show_main.id.substr(5));

}

function setImgheight(){

var pictures = g('.picture');

for (var i = 0; i < pictures.length; i++) {

pictures[i].style.marginTop = (-1*pictures[i].clientHeight/2)+'px';

}

var n;

function autoplay(){

switchSlide(n);

n++;

if(n>7){

n=1;

}

window.onload = function(){

AddSliders();

setTimeout(function(){

setImgheight();

},100)

//頁面加載時執(zhí)行第一張圖的點擊效果，5秒后調(diào)用自動播放函數(shù)，再過兩秒切換到第一張，再過兩秒切第二張

switchSlide(1);

setInterval(function(){

autoplay();

},4000)

}

</script>

</head>

<body>

<div>

<div>

</div>

</div>

</a>

</div>

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報

0/150

提交

取消

JS+CSS3實現(xiàn)帶預(yù)覽圖幻燈片效果

參與學(xué)習(xí) 53753 人
解答問題 279 個

同樣的幻燈片，不一樣的切換，學(xué)會實現(xiàn)思路，操作很簡單

進入課程

本課相似問答

1 回答自動播放如何實現(xiàn)

1 回答請問這預(yù)覽幻燈片怎么才能制作成自動播放的幻燈片？

1 回答在頁面上播放音樂怎么辦？

1 回答自動切換幻燈片

1 回答這個幻燈片會自己動嗎

搜索更多本課相關(guān)問答

自動播放功能

我要回答關(guān)注問題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

自動播放功能

4 回答

本課相似問答

自動播放功能