使用原生的javascript來實現(xiàn)輪播圖
更新時間：2017年02月24日 08:50:31 投稿：mrr
這篇文章主要介紹了使用原生的javascript來實現(xiàn)輪播圖,在代碼底部給大家補充了原生javascript實現(xiàn)banner圖自動輪播切換
，需要的朋友可以參考下
下面看下js輪播圖的實現(xiàn)代碼，具體代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
function $(element) {
return document.getElementById(element);
}
var box = $("box");
var screen = box.children[0];
var ul = screen.children[0];
var ulLis = ul.children;
var ol = screen.children[1];
var arr = $("arr");
var left = $("left");
var right = $("right");
//動態(tài)創(chuàng)建小圖標
for (var i = 0; i < ulLis.length; i++) {
var li = document.createElement("li");
li.innerHTML = i + 1;
ol.appendChild(li);
}
//設置這些個小圖標
var olLis = ol.children;
var imgWidth = screen.offsetWidth;
for (var j = 0; j < olLis.length; j++) {
olLis[j].index = j;
olLis[j].onmouseover = function () {
//排他思想
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
this.className = "current";
var target = -imgWidth * this.index;
cutton(ul, target, 20);
//為了讓點擊事件和小面的小圖標能夠一一對應，設置他們的索引值相同
pic = square = this.index;
}
}
//給小圖標設置一個初始樣式
ol.children[0].className = "current";
//給ul追加一張圖
ul.appendChild(ul.children[0].cloneNode(true));
//設置箭頭的顯示與隱藏
box.onmouseover = function () {
arr.style.display = "block";
//鼠標放上去的時候，不再自動滾動
clearInterval(timer);
}
box.onmouseout = function () {
arr.style.display = "none";
//鼠標離開的時候，繼續(xù)自動滾動
timer = setInterval(playNext, 1000);
}
//設置點擊左右小箭頭的事件且要求小圖標要跟著變化
//1.設置點擊右側箭頭
var pic = 0;//記錄當前為第幾項用
var square = 0;//記錄小圖標的索引值
/* right.onclick = function () {//存在的問題是當移動到最后一張的時候，無法跳轉到第一張
pic++;
var target = -pic * imgWidth;
cutton(ul, target, 20);
}*/
//方法改進
/*right.onclick = function () {
//先對pic做一個判斷，當pic的值為5的時候，實現(xiàn)一個跳轉
if (pic == ulLis.length - 1) {
ul.style.left = 0;
pic = 0;
}
pic++;
var target = -pic * imgWidth;
cutton(ul, target, 20);
if (square == olLis.length - 1) {
square = -1;//下面會加一，就變成了0
}
square++;
//排他思想
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}*/
//使用封裝函數(shù)
right.onclick = function () {
playNext();
}
//2.設置點擊左側箭頭
left.onclick = function () {//要判斷一下當pic為零時的情況
if (pic == 0) {
ul.style.left = -imgWidth * (ulLis.length - 1) + "px";//要記得加單位
pic = ulLis.length - 1;//給pic重新賦一個值
}
pic--;
var target = -pic * imgWidth;
cutton(ul, target, 20);
//設置小圖標樣式
if (square == 0) {
square = olLis.length;
}
square--;
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}
//設置自動滾動
//1.封裝點擊右側小箭頭事件
function playNext() {
//先對pic做一個判斷，當pic的值為5的時候，實現(xiàn)一個跳轉
if (pic == ulLis.length - 1) {
ul.style.left = 0;
pic = 0;
}
pic++;
var target = -pic * imgWidth;
cutton(ul, target, 20);
if (square == olLis.length - 1) {
square = -1;//下面會加一，就變成了0
}
square++;
//排他思想
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}
//2.調用這個封裝的函數(shù)，并且設置一個間歇性計時器
var timer = null;
timer = setInterval(playNext, 1000);
//封裝函數(shù)
function cutton(obj, target, stp) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = stp;
step = obj.offsetLeft > target ? -step : step;
if (Math.abs(obj.offsetLeft - target) >= Math.abs(step)) {
obj.style.left = obj.offsetLeft + step + "px";
} else {
obj.style.left = target + "px";
clearInterval(obj.timer);
}
}, 15)
}
</script>
</body>
</html>
補充：原生javascript實現(xiàn)banner圖自動輪播切換
一般在做banner輪播圖的時候都是用jquery，因為代碼少，方便，不需要花費很長的時間去獲取某個元素作為變量，然后再進行操作，只要一個$就搞定了。但是今天我用原生的javascript做了一下這個輪播效果，感覺還行，以下是部分js源代碼，僅供參考！文章底部查看效果演示。
1、鼠標離開banner圖，每隔2s切換一次；
2、鼠標滑過下方的小按鈕，可以切換圖片；
3、鼠標點擊左右按鈕，可以切換圖片。
var oPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;
window.onload = function(){
oPic = document.getElementsByClassName("pic")[0];
oLi = oPic.getElementsByTagName("li");
anniu = document.getElementsByClassName("anniu")[0];
aLi = anniu.getElementsByTagName("li");
aLength = aLi.length;
num = 0;
oG = document.getElementsByClassName("g")[0];
oSpan = oG.getElementsByTagName("span");
oLeft = oSpan[0];
oRight = oSpan[1];
start();
oG.onmouseover = end;
oG.onmouseout = start;
for(var j=0; j<aLength; j++){
aLi[j].index = j;
aLi[j].onmouseover = change;
}
oRight.onclick = time;
oLeft.onclick = times;
}
//自動輪播開始或結束
function start(){
timer = setInterval(time,2000);
hide();
}
function end(){
clearInterval(timer);
show();
}
//圖片切換++
function time(){
for(var i=0; i<aLength; i++){
oLi[i].style.display = "none";
aLi[i].className = "";
}
num++;
num = num % 4;
oLi[num].style.display = "block";
aLi[num].className = "on";
}
//圖片切換--
function times(){
for(var i=0; i<aLength; i++){
oLi[i].style.display = "none";
aLi[i].className = "";
}
num--;
num = (num+4)%4;
oLi[num].style.display = "block";
aLi[num].className = "on";
}
//鼠標滑過按鈕，圖片輪播
function change(){
_index = this.index;
for(var k=0; k<aLength; k++){
aLi[k].className = "";
oLi[k].style.display = "none";
}
aLi[_index].className = "on";
oLi[_index].style.display = "block";
}
//左右按鈕顯示或隱藏
function show(){
oSpan[0].style.display = "block";
oSpan[1].style.display = "block";
}
function hide(){
oSpan[0].style.display = "none";
oSpan[1].style.display = "none";
}
以上所述是小編給大家介紹的使用原生的javascript來實現(xiàn)輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
next.js之getStaticProps?getStaticPaths使用技巧解析
這篇文章主要為大家介紹了next.js之getStaticProps?getStaticPaths使用技巧解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
下面小編就為大家?guī)硪黄斦刯avascript精度問題與調整。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了javascript 緩沖運動框架的實現(xiàn)的相關資料,希望通過本能幫助到大家，實現(xiàn)這樣類似的功能，需要的朋友可以參考下2017-09-09
微信小程序購物商城系統(tǒng)開發(fā)系列-目錄結構介紹
這篇文章主要介紹了微信小程序購物商城系統(tǒng)開發(fā)系列-目錄結構介紹，有興趣的可以了解一下。2016-11-11
微信小程序吸底區(qū)域適配iPhoneX的實現(xiàn)
這篇文章主要介紹了微信小程序吸底區(qū)域適配iPhoneX的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
把網站設置為瀏覽器的首頁是我們做網站時經常加到網站頂部的功能！下面這段代碼是強制設置為首頁的代碼！最好別用?。『呛?！2009-01-01
其實所謂bind顧名思義就是綁定。bind()方法會創(chuàng)建一個新函數(shù)，當這個新函數(shù)被調用時，它的this值是傳遞給bind()的第一個參數(shù)，它的參數(shù)是bind()的其他參數(shù)和其原本的參數(shù)。這么說可能很多人都糊涂了，下面通過這篇文章的示例來給大家詳細的介紹下吧。2016-12-12
javascript實現(xiàn)獲取瀏覽器版本、瀏覽器類型
這篇文章主要介紹了javascript實現(xiàn)獲取瀏覽器版本，javascript實現(xiàn)獲取瀏覽器類型兩大方面，對這方面感興趣的朋友可以參考一下2015-12-12
js利用for in循環(huán)獲取 一個對象的所有屬性以及值的實例
下面小編就為大家?guī)硪黄猨s利用for in循環(huán)獲取 一個對象的所有屬性以及值的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03