码迷,mamicode.com
首页 > Web开发 > 详细

js slide

时间:2017-06-05 16:50:54      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:loki   log   func   esc   misc   sch   select   apt   and   

$(function () {
    const sliderData=[
        {
            img:"../images/1.jpg",
            name:"",
            desc:"Earth‘s mightiest heroes must come together and learn to fight as a team if they are to stop the mischievous Loki and his alien army from enslaving humanity.",
        },
        {
            img:"../images/2.jpg",
            name:"",
            desc:"Earth‘s mightiest heroes must come together and learn to fight as a team if they are to stop the mischievous Loki and his alien army from enslaving humanity.",
        }
    ];
    for(var i=0;i<sliderData.length;i++){
        var slider=document.querySelector(‘.slider‘);
        var img=sliderData[i].img;
        var name=sliderData[i].name;
        var desc=sliderData[i].desc;
        var slideData=
            // ‘<div class="slide" data-slide="slide-${i}">‘ +
            // ‘   <div class="slide-image"><img src="${img}" ></div>‘ +
            // ‘   <div class="slide-caption">‘ +
            // ‘       <div class="slide-caption-content">‘ +
            // ‘            <div class="title-bg">‘ +
            // ‘               <h1>${name}</h1>‘+
            // ‘               <p>${desc}</p>‘+
            // ‘            </div>‘+
            // ‘       </div>‘+
            // ‘   </div>‘+
            // ‘</div>‘;
            ‘<div class="slide" data-slide="slide-‘+i+‘">‘ +
            ‘   <div class="slide-image"><img src="‘+img+‘" ></div>‘ +
            ‘   <div class="slide-caption">‘ +
            ‘       <div class="slide-caption-content">‘ +
            ‘            <div class="title-bg">‘ +
            ‘               <h1>‘+name+‘</h1>‘+
            ‘               <p>‘+desc+‘</p>‘+
            ‘            </div>‘+
            ‘       </div>‘+
            ‘   </div>‘+
            ‘</div>‘;
        slider.innerHTML += slideData;
    }
    var slides=document.querySelectorAll(".slide");
    var currentSlide=0;
    slides[currentSlide]=0;
    slides[currentSlide].classList.add("visible");
    var slideInterval=setInterval(function () {
        slides[currentSlide].classList.remove("visible");
        currentSlide=(currentSlide+1)%slides.length;
        slides[currentSlide].classList.add("visible");
    },5000);
});

 

js slide

标签:loki   log   func   esc   misc   sch   select   apt   and   

原文地址:http://www.cnblogs.com/mudeng-007/p/6945492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!