標籤：float htm ora 超出 time auth 自動 char height
html：
<!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：
@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：
/** * @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 goLeftClick(){ }//點擊向右滑動圖片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);}
：
html+css+javascript實現簡易輪播圖片
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
