js實(shí)現(xiàn)輪播圖特效
更新時(shí)間：2020年05月28日 11:48:33 作者：阿布的小布
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)輪播圖特效的具體代碼，供大家參考，具體內(nèi)容如下
只需要修改圖片的src即可
html:
<body> <div id="rollImgBox"> <div class="photos clearfix"> <!--輪播圖里面首位多放最后一張與第一張圖片，以便順暢平滑切換--> <div class="move"><img src="img/timg%20(7).jpg" alt=""></div> <div class="move"><img src="img/timg%20(4).jpg" alt=""></div> <div class="move"><img src="img/timg%20(5).jpg" alt=""></div> <div class="move"><img src="img/timg%20(6).jpg" alt=""></div> <div class="move"><img src="img/timg%20(7).jpg" alt=""></div> <div class="move"><img src="img/timg%20(4).jpg" alt=""></div> </div> <!--points圓點(diǎn)導(dǎo)航,js動(dòng)態(tài)生成--> <div class="points"></div> <!--如果需要向左與向右的按鍵，引入方向圖片--> <span class="leftPoint"> < </span> <span class="rightPoint"> > </span> </div> </body>
style:
*{
margin: 0;
padding: 0;
}
.clearfix{
zoom: 1;
}
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
#rollImgBox{
/*這里讓盒子居中，應(yīng)用到具體頁面刪除即可*/
margin: 20px auto;
/*如果該輪播圖不是獨(dú)占一行，需要將其改為行內(nèi)塊元素*/
display: block;
position: relative;
/*在這里設(shè)置裝載圖片的框框的寬高*/
width: 947px;
height: 585px;
/*在這里設(shè)置邊框的樣式用outline，這樣就不會(huì)影響到后面的js了
/*加邊框，用outline即可，不會(huì)影響實(shí)際的距離*/
outline: 5px solid blue;
overflow: hidden;
}
#rollImgBox .photos .move img{
/*在這里設(shè)置圖片的寬高，與邊框的寬高相同*/
width: 947px;
height: 585px;
}
#rollImgBox .photos{
position: relative;
/*移動(dòng)的是圖片的寬度,左移947px*/
left: -947px;
}
#rollImgBox:hover{
cursor: pointer;
}
#rollImgBox .photos div{
float: left;
}
#rollImgBox .points{
position: absolute;
/*在這里修改圓點(diǎn)導(dǎo)航的位置*/
bottom: 30px;
right: 170px;/*右下方*/
text-align: center;
}
#rollImgBox .points span{
display: inline-block;
/*在這里可以更改圓點(diǎn)的大小*/
text-align: center;
line-height: 66px;
font-size: 24px;
font-family: 微軟雅黑;
width: 66px;
height: 66px;
background: rgba(112,117,112,.6);
border-radius: 50%;
margin-left: 15px;
}
#rollImgBox .points .pointsNow{
background: rgba(62,255,49,.6);
}
/*左右按鈕*/
#rollImgBox .leftPoint{
width: 60px;
height: 60px;
background: rgba(0,0,0,.5);
text-align: center;
line-height: 60px;
position: absolute;
font-size: 30px;
color: white;
top: 290px;
left: 0;
}
#rollImgBox .rightPoint{
width: 60px;
height: 60px;
background: rgba(0,0,0,.5);
text-align: center;
line-height: 60px;
position: absolute;
font-size: 30px;
color: white;
top: 290px;
right: 0;
}
#rollImgBox .leftPoint:hover{
background: rgba(255,0,0,.5);
}
#rollImgBox .rightPoint:hover{
background: rgba(255,0,0,.5);
}
script:
window.onload = function(){
let rollImgBox = document.querySelector("#rollImgBox");
let photos = document.querySelector("#rollImgBox .photos");
let allimg = document.querySelectorAll("#rollImgBox .move img");
let index = 2;
//動(dòng)態(tài)設(shè)計(jì)移動(dòng)圖片的框框?qū)捀?
//(rollImgBox.offsetWidth)是要剪去邊框的寬度
photos.style.width = (allimg.length)*(rollImgBox.offsetWidth) + "px";
photos.style.height = rollImgBox.offsetHeight + "px";
//動(dòng)態(tài)創(chuàng)建小圓點(diǎn)
let point = new Array();
let points = document.querySelector("#rollImgBox .points");
for (let i=0;i<(allimg.length-2);i++){
point[i] = document.createElement("span");
point[i].innerHTML = (i+1);
points.appendChild(point[i]);
}
point[0].className = "pointsNow";
let rollImgIterval = setInterval(function () {
//圖片的輪播
if (index === allimg.length){
photos.style.left = 0;
index = 1;
photos.style.transition = "0s";
point[0].className = "pointsNow";
} else {
photos.style.transition = "1.5s";
}
photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
index++;
//小圓點(diǎn)的變換
for (let j=0;j<(allimg.length-2);j++){
if (j === index-2){
point[j].className = "pointsNow";
} else {
point[j].className = "";
}
}
//這里是最后一張圖片（與展現(xiàn)的第一張一樣的圖）設(shè)置小圓點(diǎn)樣式
if (index === allimg.length){
point[0].className = "pointsNow";
}
},2000);
//當(dāng)用戶把鼠標(biāo)放到rollImgBox盒子中，需要查看圖片，自動(dòng)輪播停止
rollImgBox.onmouseover = function () {
clearInterval(rollImgIterval);
};
rollImgBox.onmouseout = function () {
rollImgIterval = setInterval(function () {
//圖片的輪播
if (index === allimg.length){
photos.style.left = 0;
index = 1;
photos.style.transition = "0s";
point[0].className = "pointsNow";
} else {
photos.style.transition = "1.5s";
}
photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
index++;
//小圓點(diǎn)的變換
for (let j=0;j<(allimg.length-2);j++){
if (j === index-2){
point[j].className = "pointsNow";
} else {
point[j].className = "";
}
}
//這里是最后一張圖片（與展現(xiàn)的第一張一樣的圖）設(shè)置小圓點(diǎn)樣式
if (index === allimg.length){
point[0].className = "pointsNow";
}
},2000);
};
//點(diǎn)擊小圓點(diǎn)，跳轉(zhuǎn)到對(duì)應(yīng)的圖片位置
for (let k=0;k<(allimg.length-2);k++){
point[k].onmousedown = function () {
photos.style.left = -(rollImgBox.offsetWidth)*(k+1) + "px";
//小圓點(diǎn)的變換
for (let j=0;j<(allimg.length-2);j++){
if (j === k){
point[j].className = "pointsNow";
} else {
point[j].className = "";
}
}
//點(diǎn)擊小圓點(diǎn)之后更改index的值
index = k+2;
}
}
//點(diǎn)擊左右方向鍵，對(duì)圖片進(jìn)行滑動(dòng)
let leftPoint = document.querySelector('#rollImgBox .leftPoint');
let rightPoint = document.querySelector('#rollImgBox .rightPoint');
leftPoint.onclick = function () {
photos.style.transition = "1s";
//向左滑動(dòng)一張圖片，并修改index的值（index--）
let dis = index-2;
//當(dāng)dis為1時(shí)，圓點(diǎn)到達(dá)第一個(gè)位置，如果再往左移動(dòng)一個(gè)，圓點(diǎn)應(yīng)該到達(dá)最后一個(gè)位置
if (dis < 1){
dis = allimg.length-2;
photos.style.left = 0;
point[dis-1].className = "pointsNow";
point[0].className = "";
index = allimg.length;
} else {
photos.style.left = -(rollImgBox.offsetWidth)*dis + "px";
point[dis-1].className = "pointsNow";
point[dis].className = "";
}
//從第一張順滑切換到最后一張
setTimeout(function () {
if (photos.style.left === '0px'){
photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-2) + "px";
photos.style.transition = '0s';
index = allimg.length-1;
}
},1000);
index--;
};
rightPoint.onclick = function () {
photos.style.transition = "1s";
//向右滑動(dòng)一張圖片，并修改index的值（index++）
let dis = index-1;
//當(dāng)dis為5時(shí)，圓點(diǎn)到達(dá)最后一個(gè)位置，如果再往右移動(dòng)一個(gè)，圓點(diǎn)應(yīng)該到達(dá)第一個(gè)位置
if (dis >= (allimg.length-2)){
photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-1) + "px";
point[0].className = "pointsNow";
point[allimg.length-3].className = "";
index = 1;
} else {
photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
point[dis].className = "pointsNow";
point[dis-1].className = "";
}
//從最后一張順滑切換到第一張
setTimeout(function () {
if (photos.style.left === ((-(rollImgBox.offsetWidth)*(allimg.length-1))+'px')){
photos.style.left = -(rollImgBox.offsetWidth) + "px";
photos.style.transition = '0s';
index = 2;
}
},1000);
index++;
};
};
更多關(guān)于輪播圖效果的專題，請(qǐng)點(diǎn)擊下方鏈接查看學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家，大家繼續(xù)關(guān)注更多精彩焦點(diǎn)輪播圖。
您可能感興趣的文章:
- 原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖
- js輪播圖之旋轉(zhuǎn)木馬效果
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換輪播圖功能
- js代碼編寫無縫輪播圖
- 如何使用JavaScript實(shí)現(xiàn)無縫滾動(dòng)自動(dòng)播放輪播圖效果
- JS+css3實(shí)現(xiàn)幻燈片輪播圖
- js實(shí)現(xiàn)輪播圖效果 純js實(shí)現(xiàn)圖片自動(dòng)切換
- js實(shí)現(xiàn)無縫輪播圖插件封裝
- 原生JS實(shí)現(xiàn)無縫輪播圖片
- js實(shí)現(xiàn)無縫輪播圖特效
- js代碼實(shí)現(xiàn)輪播圖
- JavaScript 實(shí)現(xiàn)輪播圖特效的示例
相關(guān)文章
微信小程序調(diào)用wx.getImageInfo遇到的坑解決
這篇文章主要介紹了微信小程序調(diào)用wx.getImageInfo遇到的坑解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
javascript 節(jié)點(diǎn)排序?qū)崿F(xiàn)代碼
為了讓自定義選擇選擇出的節(jié)點(diǎn)集合盡可能接近原生API選出的結(jié)果，我們往往要對(duì)結(jié)果集進(jìn)行排序，此順序當(dāng)然是從上到下，從左到右的DOM樹順序。2011-01-01
前端時(shí)間因?yàn)轫?xiàng)目需要，要對(duì)一個(gè)產(chǎn)品下所有的附屬圖片進(jìn)行分頁顯示，沒考慮ajax一張張請(qǐng)求，所以干脆一次性全部把圖片out，然后在載入的時(shí)候進(jìn)行分頁，網(wǎng)上很多jquery,property等都實(shí)現(xiàn)了2009-12-12
js實(shí)現(xiàn)當(dāng)復(fù)選框選擇匿名登錄時(shí)隱藏登錄框效果
這篇文章主要介紹了js實(shí)現(xiàn)當(dāng)復(fù)選框選擇匿名登錄時(shí)隱藏登錄框效果,實(shí)例分析了javascript動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
Cropper.js 實(shí)現(xiàn)裁剪圖片并上傳(PC端)
本案例是參考cropper站點(diǎn)實(shí)例，進(jìn)行修改簡(jiǎn)化。接下來通過本文給大家分享Cropper.js 實(shí)現(xiàn)裁剪圖片并上傳(PC端) 功能，需要的朋友參考下吧2017-08-08
uniapp自定義多列瀑布流組件項(xiàng)目實(shí)戰(zhàn)總結(jié)
這篇文章主要為大家介紹了uniapp自定義多列瀑布流組件實(shí)戰(zhàn)總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖自動(dòng)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JScript 8.0 VBArray 對(duì)象 提供對(duì) Visual Basic 安全數(shù)組的訪問。2008-05-05
這篇文章主要介紹了js中l(wèi)et和var定義變量的區(qū)別,非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
JS判斷字符串是否為整數(shù)的方法--簡(jiǎn)單的正則判斷
今天小編就為大家分享一篇JS判斷字符串是否為整數(shù)的方法--簡(jiǎn)單的正則判斷，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-07-07