动态添加图片数据并轮播多张图片

css

	#flash #play{
    
    width:100%;height:100%;list-style: none;}
		#flash #play li{
    
    display: none;width: 100%;height:100%;}
		#flash #play li img{
    
    float: left;width: 105%;height:100%;}
		#button{
    
    position: absolute;bottom:0%;list-style: none;}
		#button li{
    
    margin-left: 10px;float: left;}
		#button li div{
    
    width:12px;height: 12px;background:#DDDDDD;border-radius: 6px;cursor: pointer;}

html

<div style="height: 100%;position: relative;left: -4%" id="flash">
			 <ul  id="play">
				 <li style="display: block;"><img src="../images/nothing.png" alt="" /></li>
				 <li><img src="../images/nothing.png"/></li>
				 <li><img src="../images/nothing.png"/></li>
			 </ul>
			 <ul id="button">
			 	<li><div style='background: #A0D3EB;'></div></li>
			 	<li><div></div></li>
			 	<li><div></div></li>
			 </ul>
			 <div id="prev" style="display: none;"></div>
			 <div id="next" style="display: none;"></div>
		 </div>

动态添加图片数据

					var _ihtml="";
                     var _nhtml="";
                     if(arr.length==0){
    
    
                         _ihtml+="<li style='display: block;'><img src='../images/nothing.png' alt='' /></li>";
                     }else{
    
    
                         $.each(arr,function(i,c){
    
    
                             if(arr.length==1){
    
    
                                 _ihtml+="<li style='display: block;'><img src='"+c+"' alt='' /></li>";
                             }else{
    
    
                                 if(i==0){
    
    
                                     _ihtml+="<li style='display: block;'><img src='"+c+"' alt='' /></li>";
                                     _nhtml+="<li><div style='background: #A0D3EB;'></div></li>";
                                 }else{
    
    
                                     _ihtml+="<li><img src='"+c+"'/></li>";
                                     _nhtml+="<li><div></div></li>";
                                 }
                             }
                         });
                     }
                     $("#play").html(_ihtml);
                     $("#button").html(_nhtml);

js

function lunbo() {
    
    
            var oPlay=document.getElementById('play');
            var aLi=oPlay.getElementsByTagName('li');
            var oButton=document.getElementById('button');
            var aDiv=oButton.getElementsByTagName('div');
            var oPrev=document.getElementById('prev');
            var oNext=document.getElementById('next');
            var oFlash=document.getElementById('flash');
            var now=0;
            var timer2=null;
            console.log(aDiv.length)
            if(aDiv.length>1) {
    
    
            for (var i = 0; i < aDiv.length; i++) {
    
    
                console.log(6666)
                aDiv[i].index = i;
                aDiv[i].onmouseover = function () {
    
    
                    if (now == this.index) return;
                    now = this.index;
                    tab();
                }
            }
            oPrev.onclick = function () {
    
    
                now--;
                if (now == -1) {
    
    
                    now = aDiv.length - 1;
                }
                console.log(777)
                tab();
            }
            oNext.onclick = function () {
    
    
                now++;
                if (now == aDiv.length) {
    
    
                    now = 0;
                }
                console.log(8888)
                tab();
            }

            oFlash.onmouseover = function () {
    
    
                clearInterval(timer2);
            }
            oFlash.onmouseout = function () {
    
    
                timer2 = setInterval(oNext.onclick, 2000);
            }
            timer2 = setInterval(oNext.onclick, 3000);
            }

        function tab(){
    
    
            console.log(99)
            for(var i=0; i<aLi.length; i++){
    
    
                aLi[i].style.display='none';
            }
            for(var i=0; i<aDiv.length; i++) {
    
    
                aDiv[i].style.background="#DDDDDD";
            }
            aDiv[now].style.background='#A0D3EB';
            aLi[now].style.display='block';
            aLi[now].style.opacity=0;
            aLi[now].style.filter="alpha(opacity=0)";
            jianbian(aLi[now]);
        }
        function jianbian(obj){
    
    
            var alpha=0;
            clearInterval(timer);
            var timer=setInterval(function(){
    
    
                alpha++;
                obj.style.opacity=alpha/100;
                obj.style.filter="alpha(opacity="+alpha+")";
                if(alpha==100) {
    
    
                    clearInterval(timer);
                }
            },10);
        }
    }