html+css+javascript實現簡易輪播圖片

時間 2019-11-08

標籤 html+css+javascript html css javascript 實現簡易圖片欄目 JavaScript 简体版

原文原文鏈接

html：javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/test2.css">
<script type="text/javascript" src="../js/test2.js"></script>
<title>圖片輪播</title>
</head>
<body onload="onPageLoaded()">
     <div class="s1"> 
        <div class="s2"><img src="../img/left.png" onclick="goLeftClick()"></img></div>
        <div class="s3"><img src="../img/right.png" onclick="goRightClick()"></img></div>
       
         <ul id="imgList" >        
                      <li > <img  src="../img/img1.jpg"></img></li>
                      <li > <img src="../img/img2.jpg"></img></li>
                       <li > <img  src="../img/img3.jpg"></img></li>  
                       <li > <img  src="../img/img4.jpg"></img></li>     
         </ul>
    
     </div>
</body>
</html>

css：css

@CHARSET "UTF-8";


body{
    
    width:950px;
    height:800px;
    background-color: silver;
    margin: 0 auto;
    border:1px solid red;
}


.s1{
    width:950px;
    height:250px;
    margin-top: 100px;
    background-color: orange;
    position:relative; /* 先將外面的div定位 */
    left:0;
    top:0;
    overflow: hidden;/* 自動隱藏超出的內容 */
    
}

.s2{
    /* background-color: blue;*/
    
     position:absolute;/* 再將裏面的左右導航div定位 */
     left:30px;
     top:93px;
     z-index: 1;
}
.s3{
    /* background-color: blue;*/
     position:absolute;
     left:856px;
     top:93px;
     z-index: 1;
}

/*圖像ul */
.s1 ul{
    width:3800px; /* ul 寬度設置 全部圖像的寬的總和 */
    height:250px;
    padding:0;         /* padding 設置0 */
    margin:0;        /* margin 設置0 */
    background-color: purple;
    overflow: hidden; /* 自動隱藏超出的內容 */
    
}

.s1 ul > li{
     width:950px;
     list-style-type: none;
     float: left;
}
.s1 ul img{
    width:950px;
    height:250px;
    /*max-width: 100%;*/
}

javascript：html

/**
 *  @description:
 *  @author Chenchen Yu
 *  @date 2016年11月23日
 *  @time 下午9:01:21
 */

 var k=0;
 var imgNum=4;//圖片數目
 var imgWidth=950;
 function onPageLoaded(){

     setTimeout('goLeft()',2000);
    
 }

 //自動向左滑動圖片
function goLeft(){
       
      var imgList=document.getElementById('imgList');     
      marginLeft=-((k+1)%imgNum)*imgWidth;                
      if(marginLeft==0)
          {      
           
            imgList.style.marginLeft='0px';     
            k++;
            setTimeout('goLeft()',2000);
            return;
          } 
         slideLeft(imgList,marginLeft+imgWidth,marginLeft);
     // k++;
}

function slideLeft(imgList,start,marginLeft){
    //模擬滑動
    //var start=marginLeft+950;
    setTimeout('slideLeftByStep('+'imgList'+','+start+','+marginLeft+')',10);

}

function slideLeftByStep(imgList,dis,marginLeft){
    if(dis<marginLeft)
        {    
          k++;             
          setTimeout('goLeft()',2000);  
          return;
        }
      imgList.style.marginLeft=dis+'px';

      dis=dis-50;//step size
      slideLeft(imgList,dis,marginLeft);
}
//點擊向右滑動圖片
function goRightClick(){
     var imgList=document.getElementById('imgList');
    
     if(k<=0||(k)%imgNum==0)
         {
          // imgList.style.marginLeft='0px';
           k=0;
           return;
         }
     k=k-2;//後退
    
     marginLeft=-((k+1)%imgNum)*imgWidth;    
     clickSlideRight(imgList,marginLeft-imgWidth,marginLeft);
     console.log('kk',marginLeft);
//     imgList.style.marginLeft='0px';
}


function clickSlideRight(imgList,start,marginLeft){

    setTimeout('clickSlideRightByStep('+'imgList'+','+start+','+marginLeft+')',5);

}

function clickSlideRightByStep(imgList,dis,marginLeft){
    if(dis>marginLeft)
    {    
      k++; //
      return;
    }
    imgList.style.marginLeft=dis+'px';
    dis=dis+50;//step size
    clickSlideRight(imgList,dis,marginLeft);
}


//點擊向左滑動圖片
function goLeftClick(){
     var imgList=document.getElementById('imgList');
     if((k+1)%imgNum==0)
         {
           k=0;
           return;
         } 
     marginLeft=-((k+1)%imgNum)*imgWidth;    
     clickSlideLeft(imgList,marginLeft+imgWidth,marginLeft);
}


function clickSlideLeft(imgList,start,marginLeft){

    setTimeout('clickSlideLeftByStep('+'imgList'+','+start+','+marginLeft+')',5);

}

function clickSlideLeftByStep(imgList,dis,marginLeft){
    if(dis<marginLeft)
    {    
      k++;//保持自動滑動同步
      return;
    }
    imgList.style.marginLeft=dis+'px';
    dis=dis-50;//step size
    clickSlideLeft(imgList,dis,marginLeft);
}