原生js滑動(dòng)輪播封裝
更新時(shí)間：2020年07月31日 11:12:25 作者：Seeyoucm
這篇文章主要為大家詳細(xì)介紹了原生js滑動(dòng)輪播封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了原生js滑動(dòng)輪播的具體代碼，供大家參考，具體內(nèi)容如下
封裝滑動(dòng)輪播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>cmm無(wú)縫輪播</title>
<style type="text/css">
*{margin: 0 ;padding : 0}
#container{
height: 470px;
width: 590px;
border: 1px solid red;
position: relative;
margin: 50px auto;
}
#box{
position: absolute;
list-style: none;
}
#box li{
float: left;
}
#pages {
width: 100%;
height: 30px;
background: #ccc;
position: absolute;
bottom: 0;
}
#pages i {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 10px;
background: #fff;
margin: 5px;
}
#pages i.current {
background: #f00;
}
#prev, #next {
width: 45px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #ccc;
line-height: 100px;
text-align: center;
font-size: 40px;
color: #fff;
}
#next {
right: 0;
}
</style>
</head>
<body>
<div id="container">
<ul id="box">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<div id="pages"></div>
<div id="prev"><</div>
<div id="next">></div>
</div>
<script src="js/tools.js"></script>
<script>
var lis = $("li"),
length = lis.length,
liWidth = lis[0].clientWidth,
currentIndex = 0,
nextIndex = 1,
timer = null,
move = null,
circls = null,
durations = 2000;
// 動(dòng)態(tài)設(shè)置ul寬度
$("#box").style.width = length * liWidth + "px";
// 動(dòng)態(tài)設(shè)置小圓點(diǎn)
var html = "";
for(var i = 0 ;i <length ;i++){
html += "<i></i>"
}
$("#pages").innerHTML= html;
circls = $("i");
circls[0].className = "current";
// 切換動(dòng)畫(huà)
move = function(){
// 設(shè)置box運(yùn)動(dòng)終點(diǎn)值
var _left = -1 * nextIndex * liWidth;
// 開(kāi)始動(dòng)畫(huà)
animate($("#box"),{left:_left},200)
// 修改小圓點(diǎn)樣式
circls[currentIndex].className = "";
circls[nextIndex].className = "current";
// 修改索引
currentIndex = nextIndex;
nextIndex++;
if(nextIndex >= length){
nextIndex = 0;
}
}
// 自動(dòng)動(dòng)畫(huà)
timer = setInterval(move, durations)
// container中鼠標(biāo)移入，移出事件
on($("#container"),"mouseenter",function(){
clearInterval(timer);
})
on($("#container"),"mouseleaver",function(){
timer = setInterval(move, durations);
})
// 點(diǎn)擊小圓點(diǎn)，切換至對(duì)應(yīng)的圖片
on($("#pages"),"click",function(e){
e = e || event;
var src = e.target || src.Element;
if(src.nodeName === "I"){
var _index = Array.from(circls).indexOf(src);
if(_index === currentIndex){
return
}
nextIndex = _index;
move();
}
})
// 點(diǎn)擊翻頁(yè)進(jìn)行切換
on($("#prev"),"click",function(){
nextIndex = currentIndex - 1;
if(nextIndex < 0){
nextIndex = length;
}
move();
})
on($("#next"),"click",function(){
move();
})
</script>
</body>
</html>
更多關(guān)于輪播圖效果的專題，請(qǐng)點(diǎn)擊下方鏈接查看學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)移動(dòng)端輪播圖滑動(dòng)切換
- 原生JS無(wú)縫滑動(dòng)輪播圖
- js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例
- js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
- JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
- JS實(shí)現(xiàn)touch 點(diǎn)擊滑動(dòng)輪播實(shí)例代碼
- js實(shí)現(xiàn)固定寬高滑動(dòng)輪播圖效果
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- 原生js實(shí)現(xiàn)移動(dòng)開(kāi)發(fā)輪播圖、相冊(cè)滑動(dòng)特效
- js實(shí)現(xiàn)滑動(dòng)輪播效果
相關(guān)文章
JavaScript生成器函數(shù)Generator解決異步操作問(wèn)題
這篇文章主要為大家介紹了JavaScript生成器函數(shù)Generator解決異步操作問(wèn)題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
javascript設(shè)計(jì)模式 – 策略模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 策略模式,結(jié)合實(shí)例形式分析了javascript策略模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JavaScript?自定義對(duì)象,主要介紹一些方法object創(chuàng)建對(duì)象、使用構(gòu)造函數(shù)創(chuàng)建對(duì)象、字面量創(chuàng)建對(duì)象、等展開(kāi)話題，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2021-12-12
My Desktop 桌面式 代碼2008-12-12
微信小程序嵌入H5頁(yè)面(web-view)的方法詳解
使用<web-view>標(biāo)簽?zāi)茉谛〕绦蛑写蜷_(kāi)外部網(wǎng)頁(yè),但是要打開(kāi)的網(wǎng)頁(yè)的域名必須跟小程序的業(yè)務(wù)域名(業(yè)務(wù)域名可以在小程序的后臺(tái)管理界面添加)一致,否則在真機(jī)上是打不開(kāi)的,下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁(yè)面(web-view)的相關(guān)資料,需要的朋友可以參考下2022-09-09
滾動(dòng)條高度如何獲取，方法有很多，在本文將為大家詳細(xì)介紹下如何使用js做到，下面有個(gè)不錯(cuò)的示例，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10 
Javascript面象對(duì)象成員、共享成員變量實(shí)驗(yàn)
Javascript 面象對(duì)象成員、共享成員變量實(shí)驗(yàn)，需要的朋友可以參考下。
2010-11-11 
詳解JavaScript的Date對(duì)象（制作簡(jiǎn)易鐘表）
這篇文章主要為大家詳細(xì)介紹了JavaScript的Date對(duì)象，和大家分享如何制作簡(jiǎn)易鐘表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-12-12 
怎樣用Javascript實(shí)現(xiàn)建造者模式
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)建造者模式，想學(xué)習(xí)設(shè)計(jì)模式的同學(xué)，可以參考下
2021-04-04