js图片轮播

 <script>
window.onload = function() {
            var list = document.getElementById('list');var prev = document.getElementById('prev');
            var next = document.getElementById('next');

            function animate(offset) {
                //获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值,
                //且style.left获取的是字符串,需要用parseInt()取整转化为数字。
                var newLeft = parseInt(list.style.left) + offset;
                list.style.left = newLeft + 'px';
				if(newLeft<-1050){
      list.style.left = -350 + 'px';
 }
 if(newLeft>-600){
      list.style.left = -1050 + 'px';
 }
            }

            prev.onclick = function() {             
                animate(350);
            }
            next.onclick = function() {  
                animate(-350);
            }
        }
var timer;
function play() {
    timer = setInterval(function () {
        prev.onclick()
    }, 3000)
}
play();

</script>
<style type="text/css">
img{


	
}  
* {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        
        body {
            padding: -5px;
        }
        
        #container{
            position: relative;
          // float: left;
		   left:2%;
		   
	width: 350px;
	height: 150px;	
            //border: 3px solid #333;
            overflow: hidden;
        }
        
        #list {
            position: absolute;
            z-index: 1;
            width:4200px;
            height: 400px;
        }
        
        #list img {
            float: left;

	width: 350px;
	height: 150px;	
        }
        
       
        
        #buttons .on {
            background: orangered;
        }
        
        .arrow {
            position: absolute;
            top: 200px;
            z-index: 2;
            display: none;
           width: 40px;
	height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #fff;
           background-color: RGBA(0, 0, 0, .7);
border-radius: 50%;
            cursor: pointer;
        }
        
       
        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }
        
        #container:hover .arrow {
            display: block;
        }
        #prev {
            left: 0px;
        }
        
        #next {
            right: 0px;
        }

</style >

<br>
<br>


<div id="container">
        <div id="list" style="left: -350px;">
            <a href=http://hu60.net><img src="../php/rc/hu.png " alt="1" /></a>
           <a href=http://hu60.net><img src="../php/rc/hu.png " alt="1" /></a>
             <a href=http://mismusic.cn><img src="../php/rc/mi.png" alt="2" /></a>
             <a href=http://hu60.net><img src="../php/rc/hu.png " alt="3" /></a>
           
        </div>
 
     <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>

    </div>

评论

刷新

友情链接