javascript-----轮播图插件

一、效果

1、html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="slide" id=‘slide‘>
        <div class="left-btn btn" id="left-btn">&lt</div>
        <div class="slide-nav">
            <div class="slide-container" id=‘slide-container‘ style="left:0;"></div>
            <div class="slide-mask" id=‘slide-mask‘></div>
        </div>
        <div class="right-btn btn" id="right-btn">&gt</div>
    </div>
    <script type="text/javascript" src=‘js.js‘></script>
    <!--  <script type="text/javascript" src = ‘js/test/test.js‘></script> -->
</body>
</html>

　　2、js代码：

var imgObj = {
    "imgList": [
        { "name": "name1", "url": "imgs/1.jpg", "detail": "fewfewfwfewf1", "link": "http://www.hao123.com" },
        { "name": "name2", "url": "imgs/2.jpg", "detail": "fewfewfwfewf2", "link": "http://www.baidu.com" },
        { "name": "name3", "url": "imgs/3.jpg", "detail": "fewfewfwfewf3", "link": "http://www.w3cschool.com" },
        { "name": "name4", "url": "imgs/4.jpg", "detail": "fewfewfwfewf4", "link": "http://www.taobao.com" }
    ]
}
var parent = document.getElementById("slide");

slideImg(parent, imgObj);

function slideImg(parent, imgObj) {
    var leftBtn = document.getElementById("left-btn");
    var rightBtn = document.getElementById(‘right-btn‘);
    var container = document.getElementById("slide-container");
    var mask = document.getElementById("slide-mask");
    var circles = document.getElementsByClassName("img-list-btn");

    var nowIndex = 1;

    //填充图片
    var len = imgObj.imgList.length;
    for (let i = 0; i < len; i++) {
        let imgListBoj = "<div class=‘img‘>" +
            "<a href=‘" + imgObj.imgList[i].link + "‘>" +
            "<img src=‘" + imgObj.imgList[i].url + "‘>" +
            "</a>" +
            "</div>";
        container.innerHTML += imgListBoj;
    }
    //填充圆点
    for (var i = 0; i < len; i++) {
        var list;
        if (i == 0) {

            list = "<span class=‘img-list-btn choose‘ id = ‘img-list-btn‘ data-index=‘" + (i + 1) + "‘></span>";
        } else {
            list = "<span class=‘img-list-btn‘ id = ‘img-list-btn‘ data-index=‘" + (i + 1) + "‘></span>";
        }
        mask.innerHTML += list;
    }

    //左键
    leftBtn.addEventListener("click", function() {
        var left = container.getAttribute("left");

        if (left == null) {
            left = 0;
            container.setAttribute("left", "0");
        }

        if (nowIndex >= 1 && nowIndex < len) {
            left = parseInt(left) - 800;

            if (nowIndex != len) {
                nowIndex++;

                for (var j = 0; j < len; j++) {
                    /* console.log(circles[j]);*/
                    var className = circles[j].getAttribute("class");
                    className = className.replace("choose", "");
                    circles[j].setAttribute("class", className);
                }

                var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
                circle.classList.add("choose");
            }
        }

        container.setAttribute("left", left);
        var s = "transform:translateX(" + (parseInt(left)) + "px);";
        container.setAttribute("style", s);
    })

    //右键
    rightBtn.addEventListener("click", function() {
        var left = container.getAttribute("left");

        if (left == null) {
            left = 0;
            container.setAttribute("left", "0");
        }

        if (nowIndex > 1 && nowIndex <= len) {
            left = parseInt(left) + 800;
            if (nowIndex != 1) {
                nowIndex--;
            }
            for (var j = 0; j < len; j++) {
                var className = circles[j].getAttribute("class");
                className = className.replace("choose", "");
                circles[j].setAttribute("class", className);
            }

            var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
            circle.classList.add("choose");

        }
        container.setAttribute("left", left);
        var s = "transform:translateX(" + (parseInt(left)) + "px);";
        container.setAttribute("style", s);
    })

    //圆点点击事件
    mask.addEventListener("click", function(ev) {
        var ev = ev;
        var target = ev.target;
        var index = target.getAttribute("data-index");

        var s = "transform:translateX(" + (parseInt(index) * -800 + 800) + "px);";
        container.setAttribute("style", s);
        nowIndex = index;
        container.setAttribute("left", (parseInt(index) * -800 + 800));
        for (var j = 0; j < len; j++) {
            var className = circles[j].getAttribute("class");
            className = className.replace("choose", "");
            circles[j].setAttribute("class", className);
        }
        var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
        circle.classList.add("choose");
    })

    setInterval(function() {
        var t = parseInt(Math.random() * 2);
        if (t == 0) {
            rightBtn.click();
        } else {
            leftBtn.click();
        }
    }, 3000);
}

　　3、css代码：

.slide{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 800px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.slide-nav{
    width: 800px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
}

.slide-nav .slide-container {
    height: 400px;
    white-space: nowrap;
    font-size: 0;
    transition: linear 0.4s all;
}

.slide-nav .slide-container .img{
    width: 800px;
    height: 400px;
    display: inline-block;
    overflow: hidden;
}

.slide-nav .slide-container .img img {
    width: 800px;
}
.slide-mask {
    position: absolute;
    bottom: -40px;
    left: 0;
    z-index: 100;
    width: 800px;
    height: 40px;
    text-align: center;
}

.slide:hover .slide-mask {
    transform: translateY(-40px);
    transition: linear 0.3s all;
}

.slide-mask span{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px 10px 0 0;
    border-radius: 10px;
    background-color: #BD2D30;
    cursor: pointer;
}

.slide-mask .choose{
    background-color: white;
}

.left-btn {
    position: absolute;
    z-index: 120;
    width: 60px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    float: left;
    transform: translateX(-100%);
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    background: linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
}

.right-btn {
    position: absolute;
    z-index: 120;
    width: 60px;
    height: 400px;
    transform: translateX(100%);
    background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    background: linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    top: 0;
    right: 0;
}

.btn {
    line-height: 400px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.slide:hover .left-btn {
    transform: translateX(0);
    transition: linear 0.4s all;
}

.slide:hover .right-btn {
    transform: translateX(0);
    transition: linear 0.4s all;
}

时间： 2024-08-27 00:26:53

javascript-----轮播图插件的相关文章

自已动手写的轮播图插件，功能不断增加中，可以下载

前,平时总是使用别人的轮播图插件,这次决定自已写一个,功能越多越好.实际现起来,发现并不容易.先实现基本的功能,下两周要丰富起来. 图是别人的图,心是自已的心.直接上代码: 一:结构 <div class="carousel-wrap"> <div class="carousel-main-wrap"> <ul class="carousel-scr

学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序.(另外切忌不要引入两次jquery.js,会把$的方法洗掉而导致失效的) http://www.superslide2.com/ 官网 http://www.superslide2.com/SuperSlide.2.1.2/jquery.SuperSlide.2.1.2.js jquery.Sup

第124天：移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一.基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体, 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

如何用面向对象的思维去封装一个小型轮播图插件

1.面向对象与面向过程既然说到面向对象的思维,那就免不了要对面向过程的编程思维与面向对象的思维做一番比较. 笔者有一段时间天真的认为有一个类,然后new一个对象就是面向对象编程了,现在想想还是太naive了呀. 其实面向对象的编程思维和面向过程的编程思维重要的不是对象和过程,而是思维. 比如说在生活中我们要做一道西红柿炒鸡蛋,很多人的第一反应就是西红柿炒鸡蛋第一步.第二步.第三步应该怎么做,每一步放什么调料.然后在做的过程中找每一步需要的调料.这就是很典型的面向过程的思维方式:怎么做,需要什

Html5添加Tabs样式单页多图轮播图插件教程

一.HTML结构 <div id="slideBox"> <div class="J_slide">  <div class="J_slide_clip"> <ul class="J_slide_list"> <li class="J_slide_item"> <a href="javascrip

swiper轮播图插件

一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps). ③主要是为IOS而设计的,同时,在Android.WP8系统以及现代桌面浏览器也有着良好的用户体验. 二.文档 ①中文网址

基于js的自适应、多样式轮播图插件（兼容IE8+、FF、chrome等主流浏览器）

插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传入最外层盒子ID即可. 1.根据html中的Dom结构引入图片. 2.引入css和js文件 3.调用pomeloSlider.doslide(obj) sliderwidth:轮播图宽度,单位为像素,默认自适应全屏. outer:最外层盒子ID,默认为"outer" time:轮播的时间间

原生javascript轮播图！