道先生 2016-03-14 08:28 采纳率: 100%
浏览 4769
已采纳

轮播图,不断变化的背景色和图片轮播问题?

类似现在天猫首页的轮播图效果,背景色是一个色块,没秒变换一个背景色和一个图
片,。注意背景色块是可以随着页面宽度无限变宽的,而图片是一个固定大小居中的
图片。

求各位大神指导!
没钱 一个C币聊表心意T_T

  • 写回答

2条回答 默认 最新

  • 简一_hz 2016-03-14 08:57
    关注

    我这里只弄了两张图片的轮播,时间和图片数理你可以自己改
    script language="javascript" type="text/javascript">
    window.onload = function () {
    var index = 1;
    var switching = false;

    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var list = document.getElementById('list');
    var wrap = document.getElementById('wrap');
    var dots = document.getElementsByTagName('span');
    var buttons = document.getElementById('buttons');
    

    wrap.onmouseover = function () {
    prev.style.display = 'block';
    next.style.display = 'block';
    stop();
    };
    wrap.onmouseout = function () {
    prev.style.display = 'none';
    next.style.display = 'none';
    play();
    }

    function lastImg() {
        if (switching) {
            return;
        }
        switchPic(1420);
        index--;
        if (index < 1) {
            index = 2;
        }
        else if(index  > 2) {
            index = 1;
        }
        lightDot();
    }
    
    function nextImg() {
        if (switching) {
            return;
        }
        switchPic(-1420);
        index++;
        if (index < 1) {
            index = 2;
        }
        else if(index  > 2) {
            index = 1;
        }
        lightDot();
    }
    
    function btn(e) {
        if (switching) {
            return;
        }
        e = window.e || e;
        var target = e.target ? e.target: e.srcElement;
        if (target.nodeName.toLowerCase() == 'span') {
            var index1 = target.getAttribute('index');
            var offset = (index - index1) * 1420;
            switchPic(offset);
            index = index1;
            lightDot();
        }
    };
    
    // 切换图片的函数
    function switchPic(offset) {
        switching = true;
        var time = 400;
        var inter = 10; 
        var speed = Math.ceil(offset/(time/inter));
    
        var left = parseInt(list.style.left) + offset;
    
        var go = function () {
            var curLeft = parseInt(list.style.left);
            if ((speed > 0 && curLeft < left) || (speed < 0 && curLeft > left)) {
                list.style.left = curLeft + speed + 'px';
                setTimeout(go, inter);
            }
            else {
                list.style.left = left + 'px';
                if (left < -2840) {
                    list.style.left = -1420 + 'px';
                }
                else if (left > -1420) {
                    list.style.left = -2840 + 'px';
                }
                switching = false;
            }
        };
        go();
    }
    
    // 点亮小点
    function lightDot() {
        for (var i = 0, len = dots.length; i < len; i++) {
            if (dots[i].className == 'light') {
                dots[i].className = '';
                break;
            }
        }
        dots[index-1].className = 'light';
    }
    
    // 自动轮播
    var timer;
    var order;
    var interval;
    var play = function () {
        var interval1 = interval || 4000;
        if (order == 'prev') {
            timer = setInterval(lastImg, interval1);
        }
        else {
            timer = setInterval(nextImg, interval1);
        }
    };
    var stop = function () {
        clearInterval(timer);
    };
    
    // 事件绑定DOM2
    function addEvent(element, event, listener) {
        if (element.addEventListener) {
            element.addEventListener(event, listener, false);
        }
        else {
            element.attachEvent('on'+event, listener);
        }
    }
    
    
    // 点击左右键切图
    addEvent(prev, 'click', lastImg); 
    addEvent(next, 'click', nextImg);
    // 点击小点切图
    addEvent(buttons, 'click', btn); 
    
    // 指定切换顺序和间隔时间
    order = 'next';
    interval = 4000;
    
    play();
    

    };

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决