js實(shí)現(xiàn)上下滑動輪播
更新時間：2022年07月13日 14:29:31 作者：南初?
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上下滑動輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)上下滑動輪播的具體代碼，供大家參考，具體內(nèi)容如下
一、效果圖
二、設(shè)計思路
第一步：遍歷所有的元素使得鼠標(biāo)點(diǎn)擊右側(cè)小圖時，圖片變亮并且根據(jù)偏移值加上紅框。點(diǎn)擊右邊的小圖左邊出現(xiàn)對用的圖片。
第二步：利用循環(huán)計時器，克隆ul里面的第一個元素使得連續(xù)循環(huán)滑動。
第三步：鼠標(biāo)進(jìn)入時循環(huán)滑動停止，離開時繼續(xù)。
第四步：設(shè)置上下按鈕，當(dāng)?shù)谝粡垐D片的offsetTop值為0時，下面按鈕出現(xiàn)，當(dāng)?shù)竭_(dá)底部最后一個元素時，上面按鈕出現(xiàn)，底部按鈕消失，當(dāng)在整個元素中間時，上下按鈕都出現(xiàn)，每點(diǎn)擊一次按鈕移動一個格子，左邊圖片也對應(yīng)改變。
三、核心代碼
//找到right-btn 元素添加事件
var righttBtnList;
var Line;
var transy = 0;
var liHeight = 430;
var ulItem;
var count = 0;
var timer;
var speed = 2000;
var Item;
var ItemMenu;
var offsetTop = 0;
var itemtabinfo, topBtn, bottomBtn;
? ? window.onload = function () {
? ? ? ? righttBtnList = document.getElementsByClassName("right-btn");
? ? ? ? Line = document.getElementsByClassName("line")[0];
? ? ? ? ulItem = document.getElementsByClassName("item-child-ul")[0];
? ? ? ? Item = document.getElementsByClassName("item-list")[0];
? ? ? ? ItemMenu = document.getElementsByClassName("item-menu")[0];
? ? ? ? itemtabinfo = document.getElementsByClassName("item-tab-info")[0];
? ? ? ? topBtn = document.getElementsByClassName("top-btn")[0];
? ? ? ? bottomBtn = document.getElementsByClassName("bottom-btn")[0];
? ? ? ? //默認(rèn)復(fù)制第一張?zhí)砑拥絬lItem之中
? ? ? ? ulItem.appendChild(ulItem.children[0].cloneNode(true));
? ? ? ? //設(shè)置itemtabinfo 默認(rèn)移動值
? ? ? ? itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
? ? ? ? //直接默認(rèn)啟動計時器
? ? ? ? Animate();
? ? ? ? //遍歷所有的li添加事件
? ? ? ? for (var i = 0; i < righttBtnList.length; i++) {
? ? ? ? ? ? righttBtnList[i].index = i;
? ? ? ? ? ? righttBtnList[i].onclick = function () {
? ? ? ? ? ? ? ? //點(diǎn)擊當(dāng)前移除top-white
? ? ? ? ? ? ? ? if (checkClass(this, 'top-white')) {
? ? ? ? ? ? ? ? ? ? this.classList.remove("top-white");
? ? ? ? ? ? ? ? ? ? //其余的添加
? ? ? ? ? ? ? ? ? ? addWhite(this.index);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //獲取偏移值
? ? ? ? ? ? ? ? Line.style.top = ((this.index * 110 + 10) + offsetTop) + "px";
? ? ? ? ? ? ? ? //輸出當(dāng)前點(diǎn)擊的索引
? ? ? ? ? ? ? ? ulItem.style.transform = "translateY(" + (-this.index * liHeight) + "px)";
? ? ? ? ? ? ? ? //用戶點(diǎn)擊的索引 ?對應(yīng)count值
? ? ? ? ? ? ? ? count = this.index;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? Item.onmouseenter=function(){
? ? ? ? ? ? clearTimeout(timer);
? ? ? ? }
? ? ? ? Item.onmouseleave=function(){
? ? ? ? ? ? Animate();
? ? ? ? }
? ? ? ? topBtn.onclick = function () {
? ? ? ? ? ? offsetTop += 110;
? ? ? ? ? ? //獲取原來的top
? ? ? ? ? ? var oldTop = parseFloat(Line.style.top);
? ? ? ? ? ? Line.style.top = (oldTop + 110) + "px";
? ? ? ? ? ? itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
? ? ? ? ? ? checkBtnShow();
? ? ? ? }
? ? ? ? bottomBtn.onclick = function () {
? ? ? ? ? ? offsetTop -= 110;
? ? ? ? ? ? //獲取原來的top
? ? ? ? ? ? var oldTop = parseFloat(Line.style.top);
? ? ? ? ? ? //只能取到行內(nèi)樣式
? ? ? ? ? ? Line.style.top = (oldTop - 110) + "px";
? ? ? ? ? ? itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
? ? ? ? ? ? checkBtnShow();
? ? ? ? }
? ? ? ? ItemMenu.onmouseenter = function () {
? ? ? ? ? ? checkBtnShow();
? ? ? ? }
? ? ? ? function checkBtnShow() {
? ? ? ? ? ? if (offsetTop == 0) {
? ? ? ? ? ? ? ? //下面按鈕出現(xiàn)
? ? ? ? ? ? ? ? bottomBtn.classList.add("showBottom");
? ? ? ? ? ? ? ? topBtn.classList.remove("showTop");
? ? ? ? ? ? }
? ? ? ? ? ? else if (offsetTop == -220) {
? ? ? ? ? ? ? ? //上面按鈕出現(xiàn)
? ? ? ? ? ? ? ? topBtn.classList.add("showTop");
? ? ? ? ? ? ? ? bottomBtn.classList.remove("showBottom");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? //兩個按鈕同時出現(xiàn)
? ? ? ? ? ? ? ? bottomBtn.classList.add("showBottom");
? ? ? ? ? ? ? ? topBtn.classList.add("showTop");
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? ItemMenu.onmouseleave = function () {
? ? ? ? ? ? bottomBtn.classList.remove("showBottom");
? ? ? ? ? ? topBtn.classList.remove("showTop");
? ? ? ? }
? ? ? ? //檢測是否具有top-white
? ? ? ? function checkClass(obj,className){
? ? ? ? ? ? return obj.classList.contains(className);
? ? ? ? }
? ? ? ? //其余的li添加
? ? ? ? function addWhite(index){
? ? ? ? ? ? for(var i=0;i<righttBtnList.length;i++){
? ? ? ? ? ? ? ? if(i!=index){
? ? ? ? ? ? ? ? ? ? righttBtnList[i].classList.add("top-white");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //啟動計時器動畫
? ? ? ? function Animate(){
? ? ? ? ? ? //寫執(zhí)行代碼
? ? ? ? ? ? timer=setInterval(function(){
? ? ? ? ? ? ? ? if (timer)
? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? if(!ulItem.classList.contains("transY")){
? ? ? ? ? ? ? ? ? ? ulItem.classList.add("transY");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? count++;
? ? ? ? ? ? ? ? ulItem.style.transform="translateY("+(-count*liHeight)+"px)";
? ? ? ? ? ? ? ? //找出當(dāng)前每一張圖動畫完成時間
? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? if(count>=ulItem.children.length-1){
? ? ? ? ? ? ? ? ? ? ? ? count=0;
? ? ? ? ? ? ? ? ? ? ? ? //移除過渡類
? ? ? ? ? ? ? ? ? ? ? ? ulItem.classList.remove("transY");
? ? ? ? ? ? ? ? ? ? ? ? ulItem.style.transform="translateY(0px)";
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? //讓右邊的元素動畫對應(yīng)
? ? ? ? ? ? ? ? ? ? //rigthBtnlist[count].click();
? ? ? ? ? ? ? ? },500)
? ? ? ? ? ? },speed)
? ? ? ? }
? ? }?以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)滑動輪播效果
- 原生JS無縫滑動輪播圖
- js原生實(shí)現(xiàn)移動端手指滑動輪播圖效果的示例
- js實(shí)現(xiàn)從左向右滑動式輪播圖效果
- JS實(shí)現(xiàn)自動輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動)
- JS實(shí)現(xiàn)touch 點(diǎn)擊滑動輪播實(shí)例代碼
- js實(shí)現(xiàn)固定寬高滑動輪播圖效果
- javascript經(jīng)典特效分享 手風(fēng)琴、輪播圖、圖片滑動
- js實(shí)現(xiàn)支持手機(jī)滑動切換的輪播圖片效果實(shí)例
- 原生js實(shí)現(xiàn)移動開發(fā)輪播圖、相冊滑動特效
相關(guān)文章
這篇文章主要介紹了詳解webpack3編譯兼容IE8的正確姿勢，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
之前的彈出層做的挺好，但是代碼結(jié)構(gòu)有問題，這次用到了，重構(gòu)了一下，改為jQuery的插件形式，感覺還不錯，有興趣的朋友可以參考下，希望可以幫助到你2013-04-04
JS中的phototype是JS中比較難理解的一個部分，但下面這篇文章主要給大家介紹了關(guān)于Javascript利用prototype自定義數(shù)組的相關(guān)資料，通過實(shí)例給大家介紹phototype的使用，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
本篇文章主要介紹了微信小程序入門教程，現(xiàn)在分享給大家，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
這篇文章主要為大家總結(jié)了Bootstrap table的簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript正則表達(dá)式的貪婪匹配和非貪婪匹配
所謂貪婪匹配就是匹配重復(fù)字符是盡可能多的匹配，非貪婪匹配就是盡可能少的匹配，下面通過一個例子給大家分享JavaScript正則表達(dá)式的貪婪匹配和非貪婪匹配，感興趣的朋友參考下吧2017-09-09
微信小程序map組件結(jié)合高德地圖API實(shí)現(xiàn)wx.chooseLocation功能示例
這篇文章主要介紹了微信小程序map組件結(jié)合高德地圖API實(shí)現(xiàn)wx.chooseLocation功能,結(jié)合實(shí)例形式分析了map組件調(diào)用高德地圖API接口獲取地理位置提示列表并返回location相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了JavaScript 反射和屬性賦值實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
最近因?yàn)楣ぷ餍枰?，要深入的學(xué)習(xí)JavaScript，發(fā)現(xiàn)如果囫圇吞棗印象就是不深刻，自己去練習(xí)一下才能慢慢有點(diǎn)感覺。本文主要是詳解堆的javascript實(shí)現(xiàn)方法，另外堆排序?qū)ξ覀儊碚f太耳熟而又少用的情況下，本文當(dāng)作一次復(fù)習(xí)。感興趣的朋友們下面來一起看看吧。2016-11-11
原生js實(shí)現(xiàn)表格翻頁和跳轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格翻頁和跳轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09