轮播图

css

#wrapper {
    width: 1200px;
    height: 1000px;
    background: forestgreen;
    margin: 0 auto;
}

#wrapper .banner {
    width: 1200px;
    height: 360px;
    background: gray;

        position: relative;
     
        margin: 0px auto;
        background: grey;
        overflow: hidden;
}


#wrapper .banner .img-list li {
    float: left;
}

#wrapper .img-list {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 4800px;
    height: 360px;
}

.banner-nav-list {
    list-style: none;
    position: absolute;
    right: 30px;
    bottom: 25px;
}

.banner-nav-list li {
    float: left;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ffffff;
}

.banner-nav-list li.active {
    background: #ffffff;
}

js

	// JavaScript Document
	function getStyle(obj, attr) {
	    if (obj.currentStyle) {
	        return obj.currentStyle[attr];
	    } else {
	        return window.getComputedStyle(obj, false)[attr];
	    }
	}
	
	/** 
	把目标对象的指定的CSS属性，过渡到相应的值
	1 目标对象， 2 指定CSS属性和目标值   3 回调函数
	*/
	function startMove(obj, json, fn) {
	
	    clearInterval(obj.timer);
	    obj.timer = setInterval(function() {
	        for (attr in json) {
	            //获取当前属性值
	            if (attr == 'opacity') {
	                var iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
	            } else {
	                var iCur = parseInt(getStyle(obj, attr));
	            }
	            document.title = iCur;
	            //计算速度
	            var iSpeed = (json[attr] - iCur) / 8;
	            iSpeed > 0 ? iSpeed = Math.ceil(iSpeed) : iSpeed = Math.floor(iSpeed);
	
	            //判断停止
	            if (iCur == json[attr]) {
	                clearInterval(obj.timer);
	                if (fn) {
	                    fn();
	                }
	            } else {
	                if (attr == 'opacity') {
	                    obj.style.filter = 'alpha(opacity:' + parseInt(iCur + iSpeed) + ')';
	                    obj.style.opacity = (iCur + iSpeed) / 100;
	                } else {
	                    obj.style[attr] = (iCur + iSpeed) + 'px';
	                }
	            }
	        }
	    }, 30);
	}
	
	//原理，每次执行一轮属性 

html

头部

	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" />
	<script src="js/startMove.js"></script>
<script type="text/javascript">
var oUL;
var oLIs;
var oNavlist;
var currentIndex = 0;
window.onload = function() {
    oUL = document.getElementsByClassName("img-list")[0];
    oLIs = oUL.children;
    oNavlist = document.getElementsByClassName("banner-nav-list")[0].children;
    banner(); //轮播图

    ////xxxx();
}

function banner() {
    currentIndex = 1;
    var newli = oLIs[0].cloneNode(true);
    oUL.appendChild(newli);
    oUL.style.width = oLIs.length * oLIs[0].offsetWidth + "px";

    for (var i = 0; i < oNavlist.length; i++) {
        oNavlist[i].index = i;
        oNavlist[i].onclick = function() {
            clearInterval(timer);

            startMove(oUL, { left: this.index * -oLIs[0].offsetWidth });
            for (var i = 0; i < oNavlist.length; i++) {
                oNavlist[i].className = "";
            }
            this.className = "active";
            currentIndex = this.index + 1;

            timer = setInterval(move, 3000);
        }
    }

    var timer = setInterval(move, 3000);

    function move() {
        if (currentIndex == 5) {
            oUL.style.left = 0;
            currentIndex = 1;
        }
        //oUL.style.left = oUL.offsetLeft - 810 + "px";
        startMove(oUL, { left: currentIndex * -oLIs[0].offsetWidth });
        for (var i = 0; i < oNavlist.length; i++) {
            oNavlist[i].className = "";
        }
        oNavlist[currentIndex >= 4 ? 0 : currentIndex].className = "active";
        currentIndex++;
    }

}
</script>