JS点击切换翻页

我就是我 2024-04-20 09:17 63阅读 0赞

##### 1.效果如下 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDM0NDUz_size_16_color_FFFFFF_t_70]

##### 2.HTML #####

<div class="goodListW" id="goodsTag" >
        <ul>
        	<li class="gqli">
        		<div class="goods_pro">
        			<span class="img_w" name="goodsSpan1">
        				<b class="f_wz">估清</b>
        			</span>
        			<span class="img_dj">100.00/份</span>
        		</div>
        		<p class="goodsName" title="四冷">四冷</p>
        	</li>
        </ul>
    </div>

<div class="page3 gqSroll goodSroll fr">
             <span class="page_l3" onclick="scrollGqlistUp()"><b></b></span>
             <span class="page_r3" onclick="scrollGqlistDown()"><b></b></span>
     </div>

样式就不放了

##### 3.JS #####

function scrollGqlistDown() {
        var pageH = $(".goodListW").height();
        var goodsH = $(".goodListW ul").height();
        var divObj = document.getElementById("goodsTag");
        if (goodsH>pageH) {
            divObj.scrollTop += (pageH-50);
        }
    }
    function scrollGqlistUp() {
        var pageH = $(".goodListW").height();
        var goodsH = $(".goodListW ul").height();
        var divObj = document.getElementById("goodsTag");
        if (goodsH>pageH) {
            divObj.scrollTop -= (pageH-50);
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDM0NDUz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/42aad24608de4bcc920c5553ef6183e6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，63人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS点击切换翻页

1.效果如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib...

我就是我/ 2024年04月20日 09:17/ 0 赞/ 64 阅读

相关 JS点击切换背景图

JS点击切换背景图有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_ 2] [

古城微笑少年丶/ 2024年03月31日 15:36/ 0 赞/ 79 阅读

相关练习：js实现点击切换图片

点击切换图片，控制是否可以循环切换 <!DOCTYPE html> <html lang="en"> <head> <met

Dear 丶/ 2023年07月07日 11:05/ 0 赞/ 167 阅读

相关 JS实现--翻页（简单）

使用js实现简单的翻页效果上效果图 ![20200923141457974.gif][] 上代码 <!DOCTYPE html> <html lang

青旅半醒/ 2022年12月10日 02:24/ 0 赞/ 259 阅读

相关数据轮播图翻页封装（左右点击）

效果图： ![在这里插入图片描述][9a3f1f02747f4afdacca0d5517479f12.png] <template> <div cl

你的名字/ 2022年08月28日 04:58/ 0 赞/ 165 阅读

相关原生js点击轮播点击切换图片

![20180413143155395][] <!DOCTYPE html> <html> <head> <meta charset=

╰+哭是因爲堅強的太久メ/ 2022年05月27日 06:51/ 0 赞/ 293 阅读

相关 js图片轮播（翻页切换）

> 前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡

傷城~/ 2022年04月23日 01:26/ 0 赞/ 276 阅读

相关 JS实现点击按钮切换sheet页

1.需求描述有的时候我们想实现上一页、下一页或跳转到指定sheet页。效果如下 ![http://help.finereport.com/uploads/201

左手的ㄟ右手/ 2022年02月02日 01:59/ 0 赞/ 419 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 410 阅读

相关原生js点击按钮切换图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态切换图片</

谁借莪１个温暖的怀抱￠/ 2022年01月05日 11:27/ 0 赞/ 419 阅读