輪播圖實現想法
輪播圖一個基礎的js動畫效果,我感覺很low了,其一都在用,其二原理都差不多,其三我沒有心得啊!!!
輪播圖h5布局
<div class="carousel" id="carousel">
<div class="btns">
<a class="leftBtn" id="leftBtn"></a>
<a class="rightBtn" id="rightBtn"></a>
</div>
<div class="imageslist" id="imageslist">
<ul>
<li class="first"><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
這就是html5的布局了
css格式不寫了套用的楊杰老師的,html也是套用的
以下重頭了 JS部分 動畫基石
輪播圖的js部分
先搞到以前封裝的動畫
<script type="text/javascript" src="animate-2.0.1.js"></script>
之后 獲取到頁面的元素
寫好函數就可以了
寫圖片的運動函數
呼吸輪播圖
圖片的運動在封裝的函數里面不寫心得了
寫一個定時器 setInterval()
里面寫運動函數
定義一個變量,讓他++,給一個判斷,大于圖片最大值后變成最小值,
在封裝的函數animate()里面執行讓透明度變化,
后面綁定小圓點給一個排他模型去掉全部的設置,
變量給變成剛剛心得定義的那個
1