原生js实现无缝轮播

  因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的。

  • html部分

        <div class="banner" id="banner">
    <ul class="pic" id="pic">
    <li><a href="javascript:void(0)"><img src="data:images/1.jpg"></a></li>
    <li><a href="javascript:void(0)"><img src="data:images/2.png"></a></li>
    <li><a href="javascript:void(0)"><img src="data:images/3.png"></a></li>
    <li><a href="javascript:void(0)"><img src="data:images/4.png"></a></li>
    <li><a href="javascript:void(0)"><img src="data:images/5.jpg"></a></li>
    <li><a href="javascript:void(0)"><img src="data:images/6.png"></a></li>
    <li><a href="javascript:void(0)"><img src="data:images/7.png"></a></li>
    </ul>
    <ul class="dot" id="dot"></ul>
    <button class="left" id="leftBtn">&lt;</button>
    <button class="right" id="rightBtn">&gt;</button>
    </div>
  • css部分
           * {
    padding:;
    margin:;
    }
    .banner {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    }
    ul, li {
    list-style: none;
    }
    .pic {
    height: 600px;
    position: absolute;
    left:;
    top:;
    }
    .pic li {
    float: left;
    }
    .pic li img {
    width: 1000px;
    height: 600px;
    }
    .dot {
    width: 100%;
    text-align: center;
    font-size:;
    position: absolute;
    bottom: 40px;
    left:;
    }
    .dot li {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
    cursor: pointer;
    }
    .banner button {
    width: 30px;
    height: 50px;
    background-color: rgba(0, 0, 0, .5);
    border: 0 none;
    color: #fff;
    opacity: .5;
    position: absolute;
    top: 45%;
    cursor: pointer;
    font-size: 24px;
    }
    .left {
    left:;
    }
    .right {
    right:;
    }
  • js部分
    js中有封装的一些方法,包括查看对象属性的兼容写法,动画函数(该方法实现了height,width,left,top,opacity等属性的动画效果),和通过事件冒泡找寻节点的函数;
            var leftBtn = document.getElementById("leftBtn");
    var rightBtn = document.getElementById("rightBtn");
    var banner = document.getElementById("banner");
    var pic = document.getElementById("pic");
    var dot = document.getElementById("dot");
    for (var i = 0; i < pic.children.length; i++) {
    var node = document.createElement("LI");
    node.index = i;
    dot.appendChild(node);
    }
    var copy = pic.children[0].cloneNode(true);
    pic.appendChild(copy);
    var width = parseInt(getStyle(pic.children[0], "width"));
    var len = pic.children.length;
    pic.style.width = width * len + "px";
    var index = 0;
    var t;
    function move() {
    if(index == len) {
    pic.style.left = 0;
    index = 1;
    }
    if (index == -1) {
    pic.style.left = -(len - 1) * width + "px";
    index = len - 2;
    }
    left = -width * index;
    changeDots(index);
    animate(pic, {left, left}, function() {
    t = setTimeout(function () {
    index++;
    if (index == len) {
    pic.style.left = 0;
    index = 1;
    }
    move();
    }, 2000);
    });
    }
    move();
    // 为按钮添加点击事件
    dot.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target = getTarget(target, "tagName", "LI", this);
    if (target) {
    clearTimeout(t);
    index = target.index;
    changeDots(index);
    move();
    }
    }
    // 左右按钮
    leftBtn.onclick = function() {
    clearTimeout(t);
    index--;
    move();
    }
    rightBtn.onclick = function() {
    clearTimeout(t);
    index++;
    move();
    }
    // 改变按钮颜色
    function changeDots(index) {
    if (index < 0) {
    index = len;
    }
    if (index == len - 1) {
    index = 0;
    }
    for (var i = 0; i < len - 1; i++) {
    dot.children[i].style.backgroundColor = "#fff";
    }
    dot.children[index].style.backgroundColor = "red";
    }
    /**
    * 查看ele对象的type属性
    * @param {元素对象} ele
    * @param {属性} type
    */
    function getStyle(ele, type) {
    if (ele.currentStyle) {
    return ele.currentStyle[type];
    } else {
    return getComputedStyle(ele, null)[type];
    }
    }
    /**
    * 动画效果
    * @param {元素对象} el
    * @param {结束条件} endObj
    * @param {回调函数} cb
    * @param {时间} time
    */
    function animate(el, endObj, cb, time) {
    time = time || 200;
    var startObj = {};
    var _startObj = {};
    var speedObj = {};
    for (var i in endObj) {
    startObj[i] = parseInt(getStyle(el, i));
    _startObj[i] = startObj[i];
    speedObj[i] = 16.7 * (endObj[i] - startObj[i]) / time;
    }
    var flag = false;
    clearInterval(el.t);
    el.t = setInterval(function() {
    for (var j in endObj) {
    startObj[j] += speedObj[j];
    if (_startObj[j] < endObj[j] ? startObj[j] >= endObj[j] : startObj[j] <= endObj[j]) {
    startObj[j] = endObj[j];
    clearInterval(el.t);
    flag = true;
    }
    if (j == "opacity") {
    el.style[j] = startObj[j];
    } else {
    el.style[j] = startObj[j] + "px";
    }
    }
    if (flag && cb) {
    cb();
    }
    }, 16.7);
    }
    /**
    * 找到attr属性为value的节点
    * @param {目标对象,鼠标点击对象} target
    * @param {属性名} attr
    * @param {属性值} value
    * @param {结束条件} end
    */
    function getTarget(target, attr, value, end) {
    while (target != end) { //如果鼠标点击的是end,则直接结束
    if (target[attr] == value) { //如果点击的对象的attr属性值为value,则返回该对象
    return target;
    }
    target = target.parentNode; //否则查找其父节点
    }
    }

原生js实现无缝轮播的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  4. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  5. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  6. 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  7. 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  8. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  9. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

随机推荐

  1. 【学习总结】GirlsInAI ML-diary day-15-读/写txt文件

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day15 认识读/写txt文件 路径: 绝对路径:文件在电脑中的位置 相对路径:下面会用到 1-准备 新建一个 pytho ...

  2. JS中的块级作用域,var、let、const三者的区别

    1. 块作用域{ } <script type="text/javascript"> { var a = 1; console.log(a); // 1 } conso ...

  3. ABP中的拦截器之ValidationInterceptor(上)

    从今天这一节起就要深入到ABP中的每一个重要的知识点来一步步进行分析,在进行介绍ABP中的拦截器之前我们先要有个概念,到底什么是拦截器,在介绍这些之前,我们必须要了解AOP编程思想,这个一般翻译是面向 ...

  4. springboot 打war

    pom.xml <packaging>war</packaging> <!-- 打包设置 --> <plugins> <plugin> &l ...

  5. Python——threading模块(线程)

    一.threading模块的对象 Thread:表示一个执行线程的对象 Lock:锁 Rlock:可重入锁对象 Condition:条件变量对象,使得一个线程等待另一个线程满足特定的“条件” Even ...

  6. 【数学建模】偏最小二乘回归分析(PLSR)

    PLSR的基本原理与推导,我在这篇博客中有讲过. 0.偏最小二乘回归集成了多元线性回归.主成分分析和典型相关分析的优点,在建模中是一个更好的选择,并且MATLAB提供了完整的实现,应用时主要的问题是: ...

  7. python发送smtp 邮件 图片

    #-*- coding: utf-8 -*- # python2 import os import time import random import smtplib from time import ...

  8. 栈&队列

    队列部分 普通队列 举个形象的例子:排队买票. 有一列人在排队买票,前面来的人买完票就离开,后面来的人需要站在最后--依次类推. 在计算机中,数据结构队列有一个头指针和尾指针,头指针加一就代表有一个数 ...

  9. URL传递中文参数乱码问题

    web项目开发中,经常遇到中文参数乱码问题,而且有时候明明测试服务器上好用,换个正式环境就不用的情况也经常出现,今天做一个记录,防止自己以后忘记 1.地址栏url请求带中文参数 这类

  10. python之OpenCv(五)---抓取摄像头视频图像

    OpenCV 可以通过 头videoCapture()方法打开摄像 摄像头变量 = cv2.VideoCapture(n)   n为整数,内置摄像头为0,若有其他摄像头则依次为1,2,3,4,... ...