js實(shí)現(xiàn)移動(dòng)端輪播圖
更新時(shí)間：2020年12月21日 10:10:32 作者：WONGseedling
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)移動(dòng)端輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
這是結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/jd_phnoe.css" > <link rel="stylesheet" href="./css/base.css" > <title>Document</title> <script src="./js/jd_phnoe.js"></script> </head> <body> <div class="jd_layout"> <div class="jd_banner"> <ul class="jd_bannerimg clearfix"> <li> <a href="javascript:;" ><img src="./uploads/l1.jpg" alt="" /> </a> </li> <li> <a href="javascript:;" ><img src="./uploads/l2.jpg" alt="" /> </a> </li> <li> <a href="javascript:;" ><img src="./uploads/l3.jpg" alt="" /> </a> </li> <li> <a href="javascript:;" ><img src="./uploads/l4.jpg" alt="" /> </a> </li> <li> <a href="javascript:;" ><img src="./uploads/l5.jpg" alt="" /> </a> </li> <li> <a href="javascript:;" ><img src="./uploads/l6.jpg" alt="" /> </a> </li> <li> <a href="javascript:;" ><img src="./uploads/l7.jpg" alt="" /> </a> </li> <li> <a href="javascript:;" ><img src="./uploads/l8.jpg" alt="" /> </a> </li> </ul> <!-- 點(diǎn)標(biāo)記 --> <ul class="jd_bannerIndicator clearfix"> <li></li> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>
這是CSS
/* 搜索部分 */
.jd_layout{
width: 100%;
max-width: 640px;
min-width: 320px;
height: auto;
margin: 0px auto;
background-color: #ccc;
}
/* 輪播圖部分 */
.jd_banner{
width: 100%;
overflow: hidden;
position: relative;
}
.jd_bannerimg{
width: 1000%;
position: relative;
}
.jd_bannerimg > li{
width: 10%;
float: left;
}
.jd_bannerimg>li img{
width: 100%;
/*1.設(shè)置為塊元素
2.可以將文本的字體大小設(shè)置為0
3.vertical-align:bottom*/
display: block;
}
/* 點(diǎn)標(biāo)記 */
.jd_bannerIndicator{
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
}
.jd_bannerIndicator li{
width: 6px;
height: 6px;
float: left;
border: 1px solid #fff;
border-radius: 50%;
/* opacity: 0.7; */
margin: 0 3px;
/* cursor: pointer; */
}
.jd_bannerIndicator li:first-of-type{
margin-left: 0px;
}
.jd_bannerIndicator >li.active{
background-color: #fff;
}
dase
/*公共樣式*/
/*1.樣式重置*/
html,body,ul,li,img,a,p,div,form,input,h3{
padding: 0;
margin: 0;
/*設(shè)置盒模型*/
box-sizing: border-box;
/*去除移動(dòng)端特有的點(diǎn)擊高亮效果*/
-webkit-tap-highlight-color: transparent;
}
body{
font-family: "微軟雅黑",sans-serif;
font-size: 13px;
}
a,
a:hover{
color: #666;
text-decoration: none;
}
ul{
list-style: none;
}
input{
/*1.清除文本框獲取焦點(diǎn)時(shí)默認(rèn)的邊框陰影*/
outline: none;
/*2.去除邊框*/
border: none;
/*3.添加邊框*/
border: 1px solid #ccc;
}
/*2.添加新的樣式*/
.f_left{
float: left;
}
.f_right{
float: right;
}
.m_left10{
margin-left: 10px;
}
.m_right10{
margin-right: 10px;
}
.m_top10{
margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
content: "";
display: block;
height: 0;
line-height: 0px;
clear: both;
visibility: hidden;
}
js
window.onload = function () {
banner();
}
//輪播圖
function banner(){
/*1.設(shè)置修改輪播圖的頁(yè)面結(jié)構(gòu)
* a.在開(kāi)始位置添加原始的最后一張圖片
* b.在結(jié)束位置添加原始的第一張圖片*/
/*1.1.獲取輪播圖結(jié)構(gòu)*/
var banner=document.querySelector(".jd_banner");
/*1.2.獲取圖片容器*/
var imgBox=banner.querySelector("ul:first-of-type");
//1.3 獲取第一張圖片
var first=imgBox.querySelector("li:first-of-type");
//1.4獲取最后一張圖
var last=imgBox.querySelector("li:last-of-type");
// console.log(first);
// console.log(last);
//克隆添加圖片
/*1.5.在首尾插入兩張圖片 cloneNode:復(fù)制一個(gè)dom元素*/
imgBox.appendChild(first.cloneNode(true));
/*1.6insertBefore(需要插入的dom元素，位置)*/
imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
//獲取對(duì)應(yīng)的樣式
//2.1獲取li的位置
var lis=imgBox.querySelectorAll("li");
/*2.2 獲取li元素的數(shù)量*/
var count=lis.length;
/*2.3.獲取banner的寬度*/
var bannerWidth=banner.offsetWidth;
/*2.4 設(shè)置圖片盒子的寬度*/
imgBox.style.width=count*bannerWidth+"px";
/*2.5 設(shè)置每一個(gè)li(圖片)元素的寬度*/
for(var i=0; i < lis.length;i++){
lis[i].style.width=bannerWidth+"px";
}
/*定義圖片索引:圖片已經(jīng)有一個(gè)寬度的默認(rèn)偏移*/
var index=1;
/*3.設(shè)置默認(rèn)的偏移*/
imgBox.style.left=-bannerWidth+"px";
/*4.當(dāng)屏幕變化的時(shí)候，重新計(jì)算寬度*/
window.onresize=function(){
bannerWidth=banner.offsetWidth+"px";
imgBox.style.width=count*bannerWidth+"px";
for(var i = 0; i < lis.length;i++){
lis[i].style.width=bannerWidth+"px";
}
imgBox.style.left=-index*bannerWidth+"px";
}
//自動(dòng)輪播
var timerId;
var strtime=function(){
timerId=setInterval(function(){
index++;
//添加過(guò)度效果
imgBox.style.transition="left 0.5s ease-in-out"
//設(shè)置偏移量
imgBox.style.left=(-index*bannerWidth)+"px";
setTimeout(function(){
//當(dāng)走到最后一張時(shí)候,我就讓他等于最后一張
if(index==count-1){
index=1;
// 清除過(guò)度效果
imgBox.style.transition="none";
/*偏移到指定的位置*/
imgBox.style.left=(-index*bannerWidth)+"px";
}
},500)
},1500)
}
//自動(dòng)播放調(diào)用
strtime();
//實(shí)現(xiàn)手動(dòng)輪播
var startX,moveX,distanceX;
/*為圖片添加觸摸事件--觸摸開(kāi)始*/
var isEnd = true;
imgBox.addEventListener("touchstart",function(e){
//停止定時(shí)器
clearInterval(timerId);
//console.log(e);
startX=e.targetTouches[0].clientX;
});
//為圖片添加觸摸過(guò)程,滑動(dòng)圖片
imgBox.addEventListener("touchmove",function(e){
if(isEnd==true){
//console.log(123);
/*記錄手指在滑動(dòng)過(guò)程中的位置*/
moveX=e.targetTouches[0].clientX;
/*計(jì)算坐標(biāo)的差異*/
distanceX=moveX-startX;
//清除過(guò)度效果
imgBox.style.transition="none";
//基于之前輪播圖偏移的位置
imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
}
})
/*添加觸摸結(jié)束事件*/
imgBox.addEventListener("touchend",function(e){
//獲取滑動(dòng)距離,判斷是否超過(guò)100px
isEnd=false;
if(Math.abs(distanceX) > 50){
//判斷滑動(dòng)方向
if(distanceX > 0){//上一張
index--;
}else{//下一張
index++;
}
//過(guò)度效果
imgBox.style.transition="left 0.5s ease-in-out";
//偏移位置
imgBox.style.left=-index*bannerWidth+"px";
}else if(Math.abs(distanceX) > 0){//回彈效果
//過(guò)度效果
imgBox.style.transition="left 0.5s ease-in-out";
//偏移位置
imgBox.style.left=-index*bannerWidth+"px";
}
/*將上一次move所產(chǎn)生的數(shù)據(jù)重置為0*/
startX=0;
moveX=0;
distanceX=0;
});
/*webkitTransitionEnd:可以監(jiān)聽(tīng)當(dāng)前元素的過(guò)渡效果執(zhí)行完畢，當(dāng)一個(gè)元素的過(guò)渡效果執(zhí)行完畢的時(shí)候，會(huì)觸發(fā)這個(gè)事件*/
imgBox.addEventListener("webkitTransitionEnd",function(){
console.log(index,33333);
/*如果到了最后一張(count-1)，回到索引1*/
/*如果到了第一張(0)，回到索引count-2*/
if(index==count-1){
index=1;
imgBox.style.transition="none";
imgBox.style.left=-index*bannerWidth+"px";
}else if(index==0){
index=count-2;
imgBox.style.transition="none";
imgBox.style.left=-index*bannerWidth+"px";
}
yuandian(index);
setTimeout(function () {
isEnd=true;
clearInterval(timerId);
strtime();
},100)
});
// //圓點(diǎn)排他
var yuandian=function (index) {
//先找到所有的li 進(jìn)行遍歷移除所有樣式,為自己加上樣式
var lis=banner.querySelector("ul:last-of-type").querySelectorAll("li");
for(var i = 0; i < lis.length; i++){
lis[i].classList.remove("active");
}
lis[index-1].classList.add("active");
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
前端使用xlsx導(dǎo)出數(shù)據(jù)生成Excel文件的全過(guò)程
這篇文章主要給大家介紹了關(guān)于前端使用xlsx導(dǎo)出數(shù)據(jù)生成Excel文件的相關(guān)資料,最近在做項(xiàng)目中,后端偷懶不做導(dǎo)出功能,讓我前端實(shí)現(xiàn),所以在這里記錄下前端導(dǎo)出功能,需要的朋友可以參考下2023-08-08
注意 JavaScript 中 RegExp 對(duì)象的 test 方法
注意 JavaScript 中 RegExp 對(duì)象的 test 方法...2007-01-01
Rollup處理并打包JS文件項(xiàng)目實(shí)例代碼
rollup是一款用來(lái)es6模塊打包代碼的構(gòu)建工具(支持css和js打包)。這篇文章主要介紹了Rollup處理并打包JS文件項(xiàng)目實(shí)例,需要的朋友可以參考下2018-05-05
這篇文章介紹了在ASP.NET中使用JavaScript腳本的方法，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了如何封裝屬于自己的JS組件，對(duì)js組件擴(kuò)展以及封裝用法的認(rèn)識(shí)和總結(jié)，感興趣的小伙伴們可以參考一下2016-01-01
本篇文章主要介紹了微信小程序之小豆瓣圖書(shū)實(shí)例，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下。2016-11-11
使用JS給靜態(tài)頁(yè)面添加搜索功能的實(shí)現(xiàn)方法
靜態(tài)頁(yè)面通常由HTML、CSS 和 JavaScript 等靜態(tài)文件組成,這些文件在服務(wù)器上不會(huì)動(dòng)態(tài)生成或修改,所以加載速度通常比較快,本文給大家介紹了如何只使用JS給靜態(tài)網(wǎng)頁(yè)添加站內(nèi)全局搜索功能,文中有詳細(xì)的解決方案,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了JavaScript控制按鈕可用或不可用的方法,主要通過(guò)設(shè)置按鈕disabled屬性來(lái)實(shí)現(xiàn)這一功能,需要的朋友可以參考下2015-04-04
js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)有圖有代碼
這篇文章主要介紹了用js實(shí)現(xiàn)的簡(jiǎn)單購(gòu)物車(chē)，配有截圖，適合初學(xué)者2014-05-05
Bootstrap 3 進(jìn)度條的實(shí)現(xiàn)
這篇文章主要介紹了Bootstrap 3 進(jìn)度條的實(shí)現(xiàn),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02