使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖
更新時(shí)間：2017年02月24日 08:50:31 投稿：mrr
這篇文章主要介紹了使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖,在代碼底部給大家補(bǔ)充了原生javascript實(shí)現(xiàn)banner圖自動(dòng)輪播切換
，需要的朋友可以參考下
下面看下js輪播圖的實(shí)現(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");
//動(dòng)態(tài)創(chuàng)建小圖標(biāo)
for (var i = 0; i < ulLis.length; i++) {
var li = document.createElement("li");
li.innerHTML = i + 1;
ol.appendChild(li);
}
//設(shè)置這些個(gè)小圖標(biāo)
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);
//為了讓點(diǎn)擊事件和小面的小圖標(biāo)能夠一一對(duì)應(yīng)，設(shè)置他們的索引值相同
pic = square = this.index;
}
}
//給小圖標(biāo)設(shè)置一個(gè)初始樣式
ol.children[0].className = "current";
//給ul追加一張圖
ul.appendChild(ul.children[0].cloneNode(true));
//設(shè)置箭頭的顯示與隱藏
box.onmouseover = function () {
arr.style.display = "block";
//鼠標(biāo)放上去的時(shí)候，不再自動(dòng)滾動(dòng)
clearInterval(timer);
}
box.onmouseout = function () {
arr.style.display = "none";
//鼠標(biāo)離開(kāi)的時(shí)候，繼續(xù)自動(dòng)滾動(dòng)
timer = setInterval(playNext, 1000);
}
//設(shè)置點(diǎn)擊左右小箭頭的事件且要求小圖標(biāo)要跟著變化
//1.設(shè)置點(diǎn)擊右側(cè)箭頭
var pic = 0;//記錄當(dāng)前為第幾項(xiàng)用
var square = 0;//記錄小圖標(biāo)的索引值
/* right.onclick = function () {//存在的問(wèn)題是當(dāng)移動(dòng)到最后一張的時(shí)候，無(wú)法跳轉(zhuǎn)到第一張
pic++;
var target = -pic * imgWidth;
cutton(ul, target, 20);
}*/
//方法改進(jìn)
/*right.onclick = function () {
//先對(duì)pic做一個(gè)判斷，當(dāng)pic的值為5的時(shí)候，實(shí)現(xiàn)一個(gè)跳轉(zhuǎ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;//下面會(huì)加一，就變成了0
}
square++;
//排他思想
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}*/
//使用封裝函數(shù)
right.onclick = function () {
playNext();
}
//2.設(shè)置點(diǎn)擊左側(cè)箭頭
left.onclick = function () {//要判斷一下當(dāng)pic為零時(shí)的情況
if (pic == 0) {
ul.style.left = -imgWidth * (ulLis.length - 1) + "px";//要記得加單位
pic = ulLis.length - 1;//給pic重新賦一個(gè)值
}
pic--;
var target = -pic * imgWidth;
cutton(ul, target, 20);
//設(shè)置小圖標(biāo)樣式
if (square == 0) {
square = olLis.length;
}
square--;
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}
//設(shè)置自動(dòng)滾動(dòng)
//1.封裝點(diǎn)擊右側(cè)小箭頭事件
function playNext() {
//先對(duì)pic做一個(gè)判斷，當(dāng)pic的值為5的時(shí)候，實(shí)現(xiàn)一個(gè)跳轉(zhuǎ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;//下面會(huì)加一，就變成了0
}
square++;
//排他思想
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}
//2.調(diào)用這個(gè)封裝的函數(shù)，并且設(shè)置一個(gè)間歇性計(jì)時(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>
補(bǔ)充：原生javascript實(shí)現(xiàn)banner圖自動(dòng)輪播切換
一般在做banner輪播圖的時(shí)候都是用jquery，因?yàn)榇a少，方便，不需要花費(fèi)很長(zhǎng)的時(shí)間去獲取某個(gè)元素作為變量，然后再進(jìn)行操作，只要一個(gè)$就搞定了。但是今天我用原生的javascript做了一下這個(gè)輪播效果，感覺(jué)還行，以下是部分js源代碼，僅供參考！文章底部查看效果演示。
1、鼠標(biāo)離開(kāi)banner圖，每隔2s切換一次；
2、鼠標(biāo)滑過(guò)下方的小按鈕，可以切換圖片；
3、鼠標(biāo)點(diǎn)擊左右按鈕，可以切換圖片。
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;
}
//自動(dòng)輪播開(kāi)始或結(jié)束
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";
}
//鼠標(biāo)滑過(guò)按鈕，圖片輪播
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來(lái)實(shí)現(xiàn)輪播圖，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript貪吃蛇的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證
這篇文章主要介紹了JS實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS冒泡事件與事件捕獲,結(jié)合實(shí)例形式分析了javascript冒泡的原理與阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
在javascript中的一些選擇語(yǔ)句，其實(shí)jf語(yǔ)句就是一種，下面舉幾個(gè)不錯(cuò)的示例為大家介紹下，希望對(duì)大家學(xué)習(xí)有所幫助2013-11-11
JavaScript實(shí)現(xiàn)微信紅包算法及問(wèn)題解決方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)微信紅包算法及遇到的問(wèn)題解決方法,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了JS獲取html對(duì)象的幾種方式，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了淺談Webpack下多環(huán)境配置的思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
php gethostbyname獲取域名ip地址函數(shù)詳解
php gethostbyname獲取域名ip地址函數(shù)，需要根據(jù)域名得到ip地址的朋友有福了。2010-01-01
這里給大家推薦一款自己封裝的js時(shí)間日期格式化的函數(shù)，非常的簡(jiǎn)潔實(shí)用，分享給有需要的小伙伴2014-12-12
JavaScript實(shí)現(xiàn)控制打開(kāi)文件另存為對(duì)話框的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)控制打開(kāi)文件另存為對(duì)話框的方法,實(shí)例分析了javascript實(shí)現(xiàn)文件另存為的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04