華為輪播圖
簡陋佈局
<div id="box">
<ul>
<li><img src="../img/hw-1.png" alt=""/></li>
<li><img src="../img/hw-2.png" alt=""/></li>
<li><img src="../img/hw-3.png" alt=""/></li>
</ul>
<div id="btn">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>当可视区只有一张图片时，可使用该方法；当走完最后一张一个像素时；突然把第一张改为相对定位，放在最后面，即left值 = li.length * imgwidth; 当走完第一张时，再把相对定位取消，【重新放回第一位】：要点切换的视觉效果只是一个：最后一个到第一个之间；第一张图在static与relative之间切换；即在第一位与最后一位之间切换，视觉效果只为最后一张到第一张之间；
window.onload = function () {
var box = document.getElementById('box');
var ul = box.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');
var img = ul.getElementsByTagName('img');
var btn = document.getElementById('btn');
var a = btn.getElementsByTagName('a');
var imgwidth = img[0].offsetWidth; //1920
ul.style.width = imgwidth * img.length + 'px';
toReSize();
window.onresize = function () { //改變瀏覽器大小時
toReSize();
}
function toReSize() {
var vWidth = document.documentElement.clientWidth;//瀏覽器窗口大小
if (vWidth > 1000) { //可視區大小
for (var i = 0; i < img.length; i++) { //三個圖片都居中
img[i].style.left = -((imgwidth - vWidth) / 2 ) + 'px'
} //圖片寬度 - 可寬區大小 的一半
}
}
for (var i = 0; i < a.length; i++) {
a[i].index = i//0,1,2
a[i].onclick = function () {
for (var i = 0; i < a.length; i++) { //清空全部
a[i].className = ''
}
this.className = 'active'//當前加
startMove(ul, {left: -this.index * imgwidth})
}
}
//自動播放 開定時器,找一個變量進行累加
var iNow = 0; //iNow 即可看作屬性，給定時器使用，同時也造成循環的條件 inow是循環按鈕的
var iNow2 = 0; // [最後到第一個的無縫切換]
setInterval(toRun, 5000);
function toRun() {
if (iNow == a.length - 1) {
//1、走到最後一個時，把第一個改成定位，即把第一個放在所有圖片後面 [最後到第一個的無縫切換]
li[0].style.position = 'relative'
li[0].style.left = li.length * imgwidth + 'px'
iNow = 0;
}
else {
iNow++ //需要判斷，不然3個後出錯
}
iNow2++ //再往後累加 [最後到第一個的無縫切換]
for (var i = 0; i < a.length; i++) { //先還原按鈕
a[i].className = ''
}
a[iNow].className = 'active';
startMove(ul, {left: -iNow2 * imgwidth}, function () { //2、走完第一個時取消定位
if (iNow == 0) {
li[0].style.position = 'static'
ul.style.left = 0; //拉回，還原之前的樣式
iNow2 = 0; //iNow2要循環不能一直累加。
}
}) // function (){} 鏈式操作 [最後到第一個的無縫切換]
}
}*{margin:0;padding:0}#box{height:540px;position:relative;overflow:hidden}#box ul{position:absolute;left:0}#box ul li{list-style:none;float:left}#box ul li img{position:relative;left:0}#btn{position:absolute;width:100%;text-align:center;bottom:10px}#btn a{cursor:pointer;display:inline-block;width:11px;height:11px;background:#666;border-radius:50%}#btn .active{background:#fff}#btn a:hover{background:#fff}JS改進版：運行
JQ版，固定html，所謂帶點幼稚的封裝；
<div class="elmokSlide">
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul>
<li><img src="http://elmok.com/img/mmb1.png" alt=""/></li>
<li><img src="http://elmok.com/img/mmb2.png" alt=""/></li>
<li><img src="http://elmok.com/img/mmb3.png" alt=""/></li>
</ul>
</div>
<div class="pn">
<a href="javascript:;"> < </a>
<a href="javascript:;"> > </a>
</div>
</div>調用：
var el = new Elmokslide('.elmokSlide')
el.eslide({
'hd': true, //底部點點點
'lr': true, //左右方向
'auto': true //自動播放
})JQ改進版：運行