溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何使用原生的javascript來實現輪播圖，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體代碼如下所示：
<!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");
//動態創建小圖標
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";
//鼠標離開的時候，繼續自動滾動
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的時候，實現一個跳轉
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";
}*/
//使用封裝函數
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的時候，實現一個跳轉
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.調用這個封裝的函數，并且設置一個間歇性計時器
var timer = null;
timer = setInterval(playNext, 1000);
//封裝函數
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實現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來實現輪播圖”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
