js slide

$(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);
});
时间: 2024-10-12 13:25:41

js slide的相关文章

基于jQuery slide插件的轮播大图,带标题及简介,附源码

1.首先看效果 2.源码 1)index.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title></title> </head> <body> <!-- Demo start --> <!-- css --> <link rel=&

各种js插件

移动端图片滑动 swipe.js slide.js 桌面端图片滚动jquery.jslides.js(自己最常用的),jquery.slides.js,标准的slides.min.jquery.js 元素抖动jquery.jrumble 单页面滑动 jquery.smint.js 操作cookie jquery.cookie 3d滑动 jQuery Roundabout 网页指引说明js,路线滑动js

原生js面向对象实现简单轮播

平时中我习惯用jquery写轮播效果,实现过程不是很难,也很方便,为了加深对js面向对象的理解,我打算用面向对象实现一个简单的轮播,这里采用了字面量的方式实现.为了实现这个过程,我们要自己动手封装一个运动函数animate,在这里我采用的是匀速运动的方式,这种方式可能体验不是很好,后面分析js代码我在详细解释.废话不多说,先上代码.页面布局可以根据自己的习惯来. html代码: <head> <meta charset="UTF-8"> <meta nam

jQuery----无缝轮播图

1.效果 2.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/iconfont.css"> <link rel="stylesh

【技术】选项卡

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>滑动门(tab)jquery插件</title> <style type="text/css">body,ul,li{margin: 0;padding: 0;font: 12px n

左边跟鼠标滑动导航

<!doctype html><html><head><meta charset="utf-8"><title>左边跟随鼠标滑动导航仿淘宝UED - 懒人建站</title><meta name="keywords" content="滑动导航" /><meta name="description" content="左边跟随鼠

asp.net 播放flash

注意3点: 1.路径,swf播放器对应的是当前页面的路径,flv视频对应的是swf播放器的路径2.路径中不能出现中文3.IIS设置,IIS站点属性中的HTTP头->MIME添加MIME影射关系,MIME类型: video/x-flv 扩展名:.flv <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-trans

移动端滑屏组件

https://github.com/lihefen/slide.git https://lihefen.github.io/slide/slide/index.html slide.js /** * * @authors Your Name ([email protected]) * @date 2016-12-20 15:54:47 * @version $Id$ */ var H = document.documentElement.clientHeight; function Slide

jQuery效果之滑动

.slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideToggle([duration][,complete])--目标元素隐藏则向下滑出显示,否则向上滑入隐藏: 注:duration为方法执行的时间区间,complete为回调函数. <!DOCTYPE html> <html lang="zh_CN"> <head