使用原生的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);
}
//設(shè)置這些個小圖標
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);
//為了讓點擊事件和小面的小圖標能夠一一對應(yīng)，設(shè)置他們的索引值相同
pic = square = this.index;
}
}
//給小圖標設(shè)置一個初始樣式
ol.children[0].className = "current";
//給ul追加一張圖
ul.appendChild(ul.children[0].cloneNode(true));
//設(shè)置箭頭的顯示與隱藏
box.onmouseover = function () {
arr.style.display = "block";
//鼠標放上去的時候，不再自動滾動
clearInterval(timer);
}
box.onmouseout = function () {
arr.style.display = "none";
//鼠標離開的時候，繼續(xù)自動滾動
timer = setInterval(playNext, 1000);
}
//設(shè)置點擊左右小箭頭的事件且要求小圖標要跟著變化
//1.設(shè)置點擊右側(cè)箭頭
var pic = 0;//記錄當前為第幾項用
var square = 0;//記錄小圖標的索引值
/* right.onclick = function () {//存在的問題是當移動到最后一張的時候，無法跳轉(zhuǎn)到第一張
pic++;
var target = -pic * imgWidth;
cutton(ul, target, 20);
}*/
//方法改進
/*right.onclick = function () {
//先對pic做一個判斷，當pic的值為5的時候，實現(xiàn)一個跳轉(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;//下面會加一，就變成了0
}
square++;
//排他思想
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}*/
//使用封裝函數(shù)
right.onclick = function () {
playNext();
}
//2.設(shè)置點擊左側(cè)箭頭
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);
//設(shè)置小圖標樣式
if (square == 0) {
square = olLis.length;
}
square--;
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}
//設(shè)置自動滾動
//1.封裝點擊右側(cè)小箭頭事件
function playNext() {
//先對pic做一個判斷，當pic的值為5的時候，實現(xiàn)一個跳轉(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;//下面會加一，就變成了0
}
square++;
//排他思想
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}
//2.調(diào)用這個封裝的函數(shù)，并且設(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;
}
//自動輪播開始或結(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";
}
//鼠標滑過按鈕，圖片輪播
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)輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript貪吃蛇的實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了JS實現(xiàn)中國公民身份證號碼有效性驗證,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS冒泡事件與事件捕獲,結(jié)合實例形式分析了javascript冒泡的原理與阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
在javascript中的一些選擇語句，其實jf語句就是一種，下面舉幾個不錯的示例為大家介紹下，希望對大家學習有所幫助2013-11-11
JavaScript實現(xiàn)微信紅包算法及問題解決方法
這篇文章主要介紹了JavaScript實現(xiàn)微信紅包算法及遇到的問題解決方法,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了JS獲取html對象的幾種方式，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了淺談Webpack下多環(huán)境配置的思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
php gethostbyname獲取域名ip地址函數(shù)詳解
php gethostbyname獲取域名ip地址函數(shù)，需要根據(jù)域名得到ip地址的朋友有福了。2010-01-01
這里給大家推薦一款自己封裝的js時間日期格式化的函數(shù)，非常的簡潔實用，分享給有需要的小伙伴2014-12-12
JavaScript實現(xiàn)控制打開文件另存為對話框的方法
這篇文章主要介紹了JavaScript實現(xiàn)控制打開文件另存為對話框的方法,實例分析了javascript實現(xiàn)文件另存為的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04