2 wdzmds wdzmds 于 2016.03.14 16:28 提问

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

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

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

2个回答

u011249920
u011249920   2016.03.14 16: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();

};

showbo
showbo   Ds   Rxr 2016.03.14 17:02
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
在轮播图上放置黑色阴影背景
为了在轮播图上可以显示一些文字,需要轮播图上渲染一层衬字背景,一般色调是黑色透明背景衬白字。在加黑色背景的过程中,由于轮播结构已成型,所以添加过程较为艰难。 层次的添加需要考虑图层在文档流中的顺序。主要根据css中的z-index属性来进行设计。 我在设计时由于没有提前对一些元素进行定位,导致z-index属性无效。z-index属性必须是在元素定位以后生效。所以我在受到影响的所有元素(例如一
jquery实现简单的图片轮播
第一步css布局 外层层一个固定显示一张图片大小的div,内层一个div放图片,大小根据图片大小决定,如果是左右轮播,设置图片float:left jquery实现 var src=$("innerDiv img:first").attr("src"); $("innerDiv img:first").animate({"margin-left":"-100px"},function(){$
JavaScript--利用setInterval或setTimeout实现背景颜色轮播
Window属性---暂停和定时器 暂停 var timeoutObj = setTimeout("执行程序",毫秒) setTimeout(引用,1000)setTimeout("执行程序",1000) clearTimeout(timeoutObj) 定时器 var intervalObj = setInterval(("执行程序",毫秒) setInterval
浅谈JS实现图片轮播的各种坑
首先在文章之前,我要好好地吐槽一下当下很多人的学习方法。就拿我们实验室的人来说吧。不少人自称是搞前端的,随随便便让他们写个slider,都能用JQuery很快实现。他们意识里的前端就以为是精通JQuery,精通Bootstrap。当然,你如果是真的“精通”了,那么你也很厉害。但是如果你没有研究过JQuery和Bootstrap的源码的话。千万不要在我面前说精通。我会很鄙视你的。可是呢,如果让这些人
jquery图片轮播思路
开始就隐藏img不要用js去做。js操作dom影响速度,第二是需要在js加载完了才会把图片隐藏,这会导致没加载完前你的图片全部是显示的。 用css来隐藏img,另外图片宽高都写在img里减小渲染框架时间。 style> #focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/} style>
Android广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架等
BannerConfig.NOT_INDICATOR 不显示指示器和标题 setBannerStyle BannerConfig.CIRCLE_INDICATOR 显示圆形指示器 setBannerStyle BannerConfig.NUM_INDICATOR 显示数字指示器 setBannerStyle BannerConfig.NUM_INDICATOR_TITLE 显示数字指示器和标题 setBannerStyle BannerConfig.CIRCLE_INDICATOR_TITLE 显示圆形指示器和标题(垂直显示) setBannerStyle BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE 显示圆形指示器和标题(水平显示) setBannerStyle BannerConfig.LEFT 指示器居左 setIndicatorGravity BannerConfig.CENTER 指示器居中 setIndicatorGravity BannerConfig.RIGHT 指示器居右 setIndicatorGravity
JavaScript定时器--图片轮播
效果: http://115.159.53.185/test/jsimagescroll/js: move() 利用定时器实现移动 //要让哪一个元素运动 //元素运动方向 //从哪里运动到哪里 //时间//调用: //move(document.getElementById("demo"), 'left', '300px', '100px', 2000);function move(ele,
HTML5实现webApp中图片轮播的效果(二)之 iSlider 爬坑经历
iSlider 基本使用 1、从接口中动态加载需要呈现的图片以及相关的内容数据 2、想点击图片转到相应的页面,为什么点击事件失效了? 3、可以点击了,但是图片在容器中却不能固定了,不小心会拖动很难看?
【jquery】解决轮播图鼠标快速移入移出导致bug思路
经过这几天的学习,可以用jquery写一些简单的效果。写轮播图的时候因为用的是click()而不是mouseenter(),所以没有发现这个bug。后来上网上看到好多类似的问题,查询了一番后总结了一下解决办法: 设置定时器,使其效果延迟100ms后触发 $("div").mouseenter(function(){//鼠标移入div var timer = setTimeout(functi
轮播图 小点 无限轮播
public class MyRoolViewPager extends ViewPager { //线程实现自动轮播 Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(