溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下原生JavaScript怎么實現輪播圖效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
javascript是一種動態類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言，同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能，現在JavaScript也可被用于網絡服務器，如Node.js。
HTML代碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>淘寶輪播圖</title> <link rel="stylesheet" href="css/initialize.css" rel="external nofollow" /> <link rel="stylesheet" href="css/tblunbotu.css" rel="external nofollow" /> </head> <body> <div id="container" class="clearFix"> <div id="list" class="clearFix" > <img src="img/5.jpg" /> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/1.jpg" /> </div> <div id="buttons" class="clearFix"> <span class="on"></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a> </div> <script type="text/javascript" src="js/tblunbotu.js"></script> </body> </html>
CSS樣式如下：
/*
第一步：設置外部框的樣式
第二步: 設置圖片框的樣式
第三步: 設置箭頭的樣式
第四步: 設置小圓點的樣式
*/
#container {
margin: 50px auto;
position: relative;
width: 520px;
height: 280px;
overflow: hidden;
}
#list {
position: absolute;
z-index: 1;
width: 3640px;
}
#list img {
float: left;
width: 520px;
height: 280px;
}
#buttons {
height: 10px;
width: 100px;
position: absolute;
left: 0;/*設置水平垂直居中*/
right: 0;/*設置水平垂直居中*/
margin: 0 auto;/*設置水平垂直居中*/
bottom: 20px;
z-index: 2;
}
#buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #cccccc;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons .on {
background: orangered;
}
.arrow {
width: 40px;
height: 40px;
display: none;
position: absolute;
top: 0; /*設置水平垂直居中*/
bottom: 0; /*設置水平垂直居中*/
margin: auto 0; /*設置水平垂直居中*/
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
z-index: 2;
}
.arrow:hover{
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
}
#prev{
left: 10px;
}
#next{
right: 10px;
}javascript代碼如下
/**
* Created by zhm on 17.1.15.
*/
/*
*知識點：
* this使用
* DOM事件
* 定時器
*
* 思路：
* （1）設置它左右移動
* 問題：傳入數字為NAN??
* 解決：在頁面中增加屬性style：left:0
* （2）平滑移動（移動時間固定，每次移動的距離不一樣）
* 問題：連續點擊出現晃動？---設置標志位
* 出現空白頁？？--- 第一張圖片前加上最后一張，最后一張圖片前加上第一張
* 在類list的標簽中增加屬性style：left:-520px;
* 設置無限滾動判斷
*
* （3）設置小圓點
* 首先將所有的類置為空，當前類置為on
* 綁定小圓點和圖片
* 綁定小圓點和左右箭頭
* 設置定時器，鼠標劃上去停止，移開自動輪播
*
* */
//1.獲取元素
var container = document.getElementById("container");
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var timer = null;
var timer2 = null;
var flag = true;
var index =0;
//2.設置函數
function moveImg(dis) {
var time = 400;//運動的總時間
var eachTime = 10;//每次小移動的時間
var eachDis = dis/(time/eachTime);//每次小移動的距離
var newWeizhi = parseInt(list.style.left) + dis;//新位置
flag = false;
function eachMove(){
if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){
list.style.left = parseInt(list.style.left) + eachDis + 'px';
}else {
flag = true;
clearInterval(timer);
list.style.left = newWeizhi + 'px';
//無限滾動判斷
if (newWeizhi == 0) {
list.style.left = -2600 + 'px';
}
if (newWeizhi == -3120) {
list.style.left = -520 + 'px';
}
}
}
timer = setInterval(eachMove, 10);
}
//3.設置點擊切換圖片
next.onclick = function () {
if(!flag) return;
moveImg(-520);
//綁定箭頭和小圓點
if (index == 4) {
index = 0;
} else {
index++;
}
buttonsShow();
};
prev.onclick = function () {
if(!flag) return;
moveImg(520);
//綁定箭頭和小圓點
if (index == 0) {
index = 4;
} else {
index--;
}
buttonsShow();
};
//4.設置小圓點的綁定
function buttonsShow() {
//將之前的小圓點的樣式清除
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
break;
}
}
buttons[index].className = "on";
}
for(var i = 0 ;i<buttons.length;i++){
buttons[i].value = i;
//使用自執行函數解決i的賦值問題
(function(){
buttons[i].onclick = function(){
if(this.value == index) return;
var offset = (this.value - index)* -520;
moveImg(offset);
index = this.value;
buttonsShow();
}
})();
}
//5.設置自動輪播
timer2 = setInterval(next.onclick,1500);
container.onmouseover = function(){
clearInterval(timer2);
};
container.onmouseout = function(){
timer2 = setInterval(next.onclick,1000);
};以上是“原生JavaScript怎么實現輪播圖效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
