JS實(shí)現(xiàn)圖片輪播效果實(shí)例詳解【可自動(dòng)和手動(dòng)】
更新時(shí)間：2019年04月04日 11:12:32 作者：呵呵到天亮
這篇文章主要介紹了JS實(shí)現(xiàn)圖片輪播效果,結(jié)合完整實(shí)例形式分析了javascript可自動(dòng)和手動(dòng)輪播圖的原理、布局與輪播功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)圖片輪播效果。分享給大家供大家參考，具體如下：
本次輪播效果圖如下：
具有以下功能：1.自動(dòng)播放（鼠標(biāo)進(jìn)入顯示區(qū)域時(shí)停止播放） 2.左右焦點(diǎn)切換 3.底下小按鈕切換
以下為實(shí)現(xiàn)代碼：
首先是html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最簡(jiǎn)單的輪播效果</title>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<!--輪播圖-->
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>
</ul>
<ol class="bar">
小按鈕數(shù)量無(wú)法確定，由js動(dòng)態(tài)生成
</ol>
<!--左右焦點(diǎn)-->
<div id="arr">
<span id="left"> <</span>
<span id="right">></span>
</div>
</div>
</div>
</body>
</html>
接下來(lái)是css樣式：
<style>
* {
margin: 0;
padding: 0
}
.box {
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
}
.inner{
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.inner img{
width: 500px;
height: 300px;
vertical-align: top
}
ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left;
}
ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 20px;
text-align: center;
padding: 5px;
}
ol li{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer;
}
ol .current{
background-color: red;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
第三部分是最主要的js代碼：
<script>
/**
*
* @param id 傳入元素的id
* @returns {HTMLElement | null} 返回標(biāo)簽對(duì)象，方便獲取元素
*/
function my$(id) {
return document.getElementById(id);
}
//獲取各元素，方便操作
var box=my$("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=my$("arr");
var imgWidth=inner.offsetWidth;
var right=my$("right");
var pic=0;
//根據(jù)li個(gè)數(shù)，創(chuàng)建小按鈕
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);
//為按鈕注冊(cè)mouseover事件
liObj.onmouseover=function () {
//先清除所有按鈕的樣式
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}
}
//設(shè)置ol中第一個(gè)li有背景顏色
olObj.children[0].className = "current";
//克隆一個(gè)ul中第一個(gè)li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(onmouseclickHandle,1000);
//左右焦點(diǎn)實(shí)現(xiàn)點(diǎn)擊切換圖片功能
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.onmouseout=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,1000);
};
right.onclick=onmouseclickHandle;
function onmouseclickHandle() {
//如果pic的值是5,恰巧是ul中l(wèi)i的個(gè)數(shù)-1的值,此時(shí)頁(yè)面顯示第六個(gè)圖片,而用戶會(huì)認(rèn)為這是第一個(gè)圖,
//所以,如果用戶再次點(diǎn)擊按鈕,用戶應(yīng)該看到第二個(gè)圖片
if (pic == list.length - 1) {
//如何從第6個(gè)圖,跳轉(zhuǎn)到第一個(gè)圖
pic = 0;//先設(shè)置pic=0
ulObj.style.left = 0 + "px";//把ul的位置還原成開始的默認(rèn)位置
}
pic++;//立刻設(shè)置pic加1,那么此時(shí)用戶就會(huì)看到第二個(gè)圖片了
animate(ulObj, -pic * imgWidth);//pic從0的值加1之后,pic的值是1,然后ul移動(dòng)出去一個(gè)圖片
//如果pic==5說(shuō)明,此時(shí)顯示第6個(gè)圖(內(nèi)容是第一張圖片),第一個(gè)小按鈕有顏色,
if (pic == list.length - 1) {
//第五個(gè)按鈕顏色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一個(gè)按鈕顏色設(shè)置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按鈕的背景顏色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
left.onclick=function () {
if (pic==0){
pic=list.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
animate(ulObj,-pic*imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//當(dāng)前的pic索引對(duì)應(yīng)的按鈕設(shè)置顏色
olObj.children[pic].className = "current";
};
//設(shè)置任意的一個(gè)元素,移動(dòng)到指定的目標(biāo)位置
function animate(element, target) {
clearInterval(element.timeId);
//定時(shí)器的id值存儲(chǔ)到對(duì)象的一個(gè)屬性中
element.timeId = setInterval(function () {
//獲取元素的當(dāng)前的位置,數(shù)字類型
var current = element.offsetLeft;
//每次移動(dòng)的距離
var step = 10;
step = current < target ? step : -step;
//當(dāng)前移動(dòng)到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定時(shí)器
clearInterval(element.timeId);
//直接到達(dá)目標(biāo)
element.style.left = target + "px";
}
}, 10);
}
</script>
所有用圖片如下：
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
下面是完整的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最簡(jiǎn)單的輪播效果</title>
<style>
* {
margin: 0;
padding: 0
}
.box {
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
}
.inner{
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.inner img{
width: 500px;
height: 300px;
vertical-align: top
}
ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left;
}
ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 20px;
text-align: center;
padding: 5px;
}
ol li{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer;
}
ol .current{
background-color: red;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<!--輪播圖-->
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>
</ul>
<ol class="bar">
</ol>
<!--左右焦點(diǎn)-->
<div id="arr">
<span id="left">
<
</span>
<span id="right">
>
</span>
</div>
</div>
</div>
<script>
/**
*
* @param id 傳入元素的id
* @returns {HTMLElement | null} 返回標(biāo)簽對(duì)象，方便獲取元素
*/
function my$(id) {
return document.getElementById(id);
}
//獲取各元素，方便操作
var box=my$("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=my$("arr");
var imgWidth=inner.offsetWidth;
var right=my$("right");
var pic=0;
//根據(jù)li個(gè)數(shù)，創(chuàng)建小按鈕
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);
//為按鈕注冊(cè)mouseover事件
liObj.onmouseover=function () {
//先清除所有按鈕的樣式
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}
}
//設(shè)置ol中第一個(gè)li有背景顏色
olObj.children[0].className = "current";
//克隆一個(gè)ul中第一個(gè)li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(onmouseclickHandle,1000);
//左右焦點(diǎn)實(shí)現(xiàn)點(diǎn)擊切換圖片功能
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.onmouseout=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,1000);
};
right.onclick=onmouseclickHandle;
function onmouseclickHandle() {
//如果pic的值是5,恰巧是ul中l(wèi)i的個(gè)數(shù)-1的值,此時(shí)頁(yè)面顯示第六個(gè)圖片,而用戶會(huì)認(rèn)為這是第一個(gè)圖,
//所以,如果用戶再次點(diǎn)擊按鈕,用戶應(yīng)該看到第二個(gè)圖片
if (pic == list.length - 1) {
//如何從第6個(gè)圖,跳轉(zhuǎn)到第一個(gè)圖
pic = 0;//先設(shè)置pic=0
ulObj.style.left = 0 + "px";//把ul的位置還原成開始的默認(rèn)位置
}
pic++;//立刻設(shè)置pic加1,那么此時(shí)用戶就會(huì)看到第二個(gè)圖片了
animate(ulObj, -pic * imgWidth);//pic從0的值加1之后,pic的值是1,然后ul移動(dòng)出去一個(gè)圖片
//如果pic==5說(shuō)明,此時(shí)顯示第6個(gè)圖(內(nèi)容是第一張圖片),第一個(gè)小按鈕有顏色,
if (pic == list.length - 1) {
//第五個(gè)按鈕顏色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一個(gè)按鈕顏色設(shè)置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按鈕的背景顏色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
left.onclick=function () {
if (pic==0){
pic=list.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
animate(ulObj,-pic*imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//當(dāng)前的pic索引對(duì)應(yīng)的按鈕設(shè)置顏色
olObj.children[pic].className = "current";
};
//設(shè)置任意的一個(gè)元素,移動(dòng)到指定的目標(biāo)位置
function animate(element, target) {
clearInterval(element.timeId);
//定時(shí)器的id值存儲(chǔ)到對(duì)象的一個(gè)屬性中
element.timeId = setInterval(function () {
//獲取元素的當(dāng)前的位置,數(shù)字類型
var current = element.offsetLeft;
//每次移動(dòng)的距離
var step = 10;
step = current < target ? step : -step;
//當(dāng)前移動(dòng)到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定時(shí)器
clearInterval(element.timeId);
//直接到達(dá)目標(biāo)
element.style.left = target + "px";
}
}, 10);
}
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了js中如何向數(shù)組中添加元素unshift()方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-12-12
JS獲取填報(bào)擴(kuò)展單元格控件的值的解決辦法
這篇文章主要介紹了JS獲取填報(bào)擴(kuò)展單元格控件的值的解決辦法,需要的朋友可以參考下2017-07-07
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記三：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)單例模式原理與實(shí)現(xiàn)方法分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)單例模式原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中Javascript面向?qū)ο髥卫Ｊ较嚓P(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04 
移到這里，就會(huì)自動(dòng)點(diǎn)擊...
2006-08-08 
這篇文章主要介紹了AutoJs實(shí)現(xiàn)刷寶短視頻的思路詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-05-05 
js獲取RadioButtonList的Value/Text及選中值等信息實(shí)現(xiàn)代碼
RadioButtonList的Value,Text及選中值等信息想必有很多的朋友都想獲取到，接下來(lái)將為你介紹下如何使用js獲取，代碼很詳細(xì)，感興趣的你可以參考下，或許對(duì)你有所幫助
2013-03-03 
JavaScript定義函數(shù)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript定義函數(shù)的相關(guān)資料,需要的朋友可以參考下
2017-06-06 
JavaScript從數(shù)組的indexOf()深入之Object的Property機(jī)制
這篇文章主要介紹了JavaScript從數(shù)組的indexOf()深入——Object的Property機(jī)制的相關(guān)資料,需要的朋友可以參考下
2016-05-05 
JavaScript+html5 canvas繪制繽紛多彩的三角形效果完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas繪制繽紛多彩的三角形效果,以完整實(shí)例形式分析了html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下
2016-01-01