當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
纯JS实现带小圆点缩略图及左右箭头的轮播图
生活随笔
收集整理的這篇文章主要介紹了
纯JS实现带小圆点缩略图及左右箭头的轮播图
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML部分
<body>
<div id="container"><div id="list" class="pic" style="left:-400px"><img src="img/5.jpg" alt="1" /><img src="img/1.jpg" alt="1" /><img src="img/2.jpg" alt="1" /><img src="img/3.jpg" alt="1" /><img src="img/4.jpg" alt="1" /><img src="img/5.jpg" alt="1" /><img src="img/1.jpg" alt="1" /></div><div id="circle" class="circle"><div class="on"><p id="small" style="display: none"><img src="img/1.jpg" alt=""><a href="#"></a></p></div><div><p id="small" style="display: none"><img src="img/2.jpg" alt=""><a href="#"></a></p></div><div><p id="small" style="display: none"><img src="img/3.jpg" alt=""><a href="#"></a></p></div><div><p id="small" style="display: none"><img src="img/4.jpg" alt=""><a href="#"></a></p></div><div><p id="small" style="display: none"><img src="img/5.jpg" alt=""><a href="#"></a></p></div></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a>
</div>
</body> CSS部分
<style>
* {margin: 0;padding: 0;text-decoration: none;
}body {padding: 20px;
}#container {position: relative;width: 400px;height: 400px;margin: 0 auto;border: 5px solid #333;overflow: hidden;/*顯示一張圖片，左右的隱藏*/
}#list {position: absolute;z-index: 1;width: 2800px;height: 400px;
}#list img {float: left;width: 400px;height: 400px;
}
.circle {position: absolute;left: 150px;bottom: 20px;z-index: 2;width: 100px;height: 10px;
}.circle div {float: left;position: relative;margin-right: 5px;width: 10px;height: 10px;border-radius: 50%;border:1px solid #fff;background: #333;cursor: pointer;
}.circle div img {position: absolute;bottom: 20px;left: -54px;width: 110px;height: 70px;border-radius: 0;border: 5px solid #fff;
}
.circle div a {position: absolute;display: inline-block;top: -12px;left: -1px;width: 0;height: 0;opacity: 1;background: none;border-radius: 0;border-right: 6px solid transparent;border-left: 6px solid transparent;border-top: 6px solid #fff;}
.circle .on { background: #FF972F;
}
a { position: absolute;top: 180px;z-index: 2;/*箭頭所在層置頂*/display: none;width: 40px;height: 40px;line-height: 40px;color: #fff;font-size: 36px;text-align: center;font-weight: bold;border-radius: 50%;/*箭頭設(shè)置成圓形*/background: #000;filter:alpha(opacity:30); opacity:0.3;/*設(shè)置透明度*/cursor: pointer;
}
a:hover { filter:alpha(opacity:60); opacity:0.6;
}
#container:hover a {display: block;
}
#prev {left:10px;
}
#next {right:10px;
}
</style> js部分
<script>
window.onload = function() {var oContainer = document.getElementById('container');var oList = document.getElementById('list');var oPrev = document.getElementById('prev');var oNext = document.getElementById('next'); var oCircle = document.getElementById('circle');var aCircle = oCircle.getElementsByTagName('div');var aP = oCircle.getElementsByTagName('p');var timer;var num = 0;function animate(offset) {var newLeft = parseInt(list.style.left) + offset;list.style.left = newLeft + 'px'; if(newLeft > -400) {//如果當(dāng)前的 a = list.style.left = 0;此時(shí)圖片位于被隱藏的第五張，它的前面沒(méi)有圖， 就把-2000px賦值給a,此時(shí)圖片還是位于第五張圖，而她的前面有五張圖片所以a = -400px*5=-2000px;
list.style.left = -2000 + 'px'; }if(newLeft < -2000) {//同理，如果當(dāng)前的a= list.style.left = -2400px;此時(shí)圖片位于第一張，它的前面有六張圖，就把-400px賦值給a,此時(shí)圖片還是位于第一張，而它的前面有一張圖，所以a = -400px;
list.style.left = -400 + 'px'; }}//圖片自動(dòng)輪播function autoPlay() {//設(shè)置定時(shí)器，每隔1.5s運(yùn)行一次oNext.onclick
timer = setInterval(function(){oNext.onclick(); },1500);}function stopAutoPlay (){clearInterval(timer); }//鼠標(biāo)移入圖片，清除定時(shí)器，移開(kāi)，打開(kāi)定時(shí)器
oContainer.onmouseover = stopAutoPlay;oContainer.onmouseout = autoPlay;autoPlay();//設(shè)置小圓點(diǎn)function circleShow() {//清除之前所有的樣式for(var i = 0; i<aCircle.length; i++) {aCircle[i].className = ''; } //把第一個(gè)下標(biāo)為0的設(shè)置屬性className
aCircle[num].className = 'on';}//左右箭頭切換圖片，圓點(diǎn)樣式也跟著移動(dòng)
oPrev.onclick = function() {num--;if(num == -1) {num = aCircle.length - 1; } circleShow();animate(400);}oNext.onclick = function() {num++;if(num == aCircle.length) {num = 0; } circleShow();animate(-400);}for(var i=0; i<aCircle.length; i++) {aCircle[i].index = i;//鼠標(biāo)點(diǎn)擊小圓點(diǎn)顯示相應(yīng)圖片
aCircle[i].onclick = function() {//圖片相對(duì)左側(cè)移動(dòng)的距離var offset = 400 * (num-this.index);animate(offset);//鼠標(biāo)移動(dòng)到小圓點(diǎn)的位置
num = this.index;circleShow(); }//鼠標(biāo)移入小圓點(diǎn)顯示相應(yīng)圖片
aCircle[i].onmouseover = function(){aP[this.index].style.display = 'block';};aCircle[i].onmouseout = function(){aP[this.index].style.display = 'none';};}
?
轉(zhuǎn)載于:https://www.cnblogs.com/eddina/p/7274251.html
總結(jié)
以上是生活随笔為你收集整理的纯JS实现带小圆点缩略图及左右箭头的轮播图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 在iOS平台上使用TensorFlow教
- 下一篇： 【Java深入研究】2、JDK 1.8