整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
JavaScript實現無限輪播圖效果（附源碼）
javascript群內每日課題-今日課題：用JavaScript實現無限輪播圖效果
PS:很多企業通用的案例自己再學習過程中肯定是要熟練的，所以今天做了這個無限輪播，很多人都擔心自己寫的代碼爛，而不敢去寫代碼，總想著等自己等寫出好的代碼再來做游戲，再來練習，其實我的意見是前端新人要多些爛代碼，不管你在學習中還是工作中，你不寫夠足量的爛代碼，是無法進化到寫好代碼的程度，所以練習吧騷年
如果想要更多的企業求職加分項目，案例，游戲源碼，可以來一下我的前端群216634437，每天都會精挑細選一個特效，項目游戲出來詳細講解，分享！
知識要點
1.實現無限循環的原理：
以偏移的距離來判斷是否跳回第一張和最后一張
也可以利用循環判斷圖片的當前索引值
2.當前圖片輪播的圓點變色顯示：
因為每次點擊index+1 所以當前的index-1就是button的索引
3.實現動畫滾動效果：
原理就是把每次的偏移量分為多次完成比如一次600px那就分為10次每次偏移60px
就要用到setTimeout(go,10);//10毫秒再次調用go函數，一直到不滿足條件就停
4.點擊圓點按鈕執行動畫：
原理獲取當前的按鈕位置再獲取要點擊的按鈕的位置
用（點擊的——當前的）*-600=需要跳轉的正負距離（向左或向右）
5.自動播放：
給外層容器加個onmouseover事件再調用setInterval方法
想要練習這個案例的進群領取源碼：216634437（代碼已經上傳到群文件，自助下載練習）
頭條號里有許多web前端學習視頻，企業常用特效/案例/項目，敬請關注！
如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻
例1: 無縫連續滾動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1000px;
height: 130px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
overflow: hidden; /* 防止滾動的圖片溢出 */
}
ul{
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<!--我們在復制一套出來-->
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
</ul>
</div>
<script type="text/javascript">
var ul = document.getElementsByTagName("ul")[0];
setInterval(function(){
if(getStyle(ul,"left")===-1000){
ul.style.left = "0px";//執行這一行代碼需要多長時間???
}
ul.style.left = getStyle(ul,"left") - 1 + "px";
},10)
function getStyle(obj,attr){
if(window.getComputedStyle){
return parseInt(window.getComputedStyle(obj)[attr]);
}else{
return parseInt(obj.currentStyle[attr]);
}
}
</script>
</body>
</html>圖片規格: 200px 130px
個完整的網站是由多個網頁組成的，下面我來介紹下網頁當中最基本的一種功能——輪播圖：
下面先看看基本的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>簡易網站輪播圖</title>
<style>
.container{
width: 100%;
position: relative;
}
.container div{
width: 100%;
position: absolute;
opacity: 0;
}
div.show{
opacity: 1;
}
.container img{
width: 100%;
border-radius: 10%;
}
</style>
</head>
<body>
<div class="container" id="slider">
<div class="show"><img src="./img/lunbo/01.jpg" alt="" srcset=""></div>
<div><img src="./img/lunbo/02.jpg" alt="" srcset=""></div>
<div><img src="./img/lunbo/03.jpg" alt="" srcset=""></div>
<div><img src="./img/lunbo/04.jpg" alt="" srcset=""></div>
</div>
<script>
function task(){
var show=document.querySelector("#slider>div.show");
show.className="";
if(show.nextElementSibling!==null)
show.nextElementSibling.className="show";
else
show.parentNode.children[0].className="show";
}
setInterval(task,1000)
</script>
</body>
</html>
大家看到這些代碼是不是頭疼呢？這個代碼實現的效果請看 相關視頻
同時希望大家給我的視頻點點贊和關注，以后將繼續發布一些程序類的視頻供大家一起學習進步！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
