15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > html网页实现翻页

html网页实现翻页

时间:2023-10-06 04:12:02 | 来源:网站运营

时间:2023-10-06 04:12:02 来源:网站运营

html网页实现翻页:html网页实现翻页




代码讲解:

<!--

-->

这个是html页面的注释写法。

在注释里面,写明程序的功能,作者,创作时间等。

<script src="jquery.min.js"></script>

这个是引用jquery库,要使用jquery库的功能,就要写这句代码。

<script></script>

在这里面写js代码,实现你需要的功能。

重点就是在这里:

网页上有2个按钮,左翻页,右翻页。

简单设计了一下按钮的外观样式。

网页上还有一个div显示当前的页数。

分析网页的行为,

当用户点击左翻页的时候,

页数要减1

当页数为1的时候,

页数就被翻到了最大页数。

当用户点击右翻页的时候,页数加1,如果页数是最大页,就变为了1

这就是说,无论减,还是加,都必须保证页数在1-最大页数之间。

一旦进行减,加操作导致页数不在范围内的时候,就要调整到范围内。




然后,写代码。

要熟悉jquery的语法规则。

$美元选择器,选择html上的元素

.click这个元素被点击,发生了一个事件。

function这个是函数,发生了事件以后怎么处理,就写在这里。

熟悉一下流程控制,if else

搞清楚了网页的行为,就知道了逻辑思路了。










<!-- --><script src="jquery.min.js"></script><script>var i=1;var max_value=10;$("document").ready(function() { $("#jian").click(function () { if(i==1) { i=max_value; $(".show").text(i); } else { i =i-1; $(".show").text(i); } }); $("#jia").click(function () { if(i==max_value) { i=1; $(".show").text(i); } else { i=1+i; $(".show").text(i); } });});</script><style>.anniu{ width:100px; height:50px; background:red;}.show{width:100px;height:50px;background:rgb(143,231,163);text-align:center;line-height:50px;}.anniu,.show{float:left;}</style><div> <div class="anniu" id="jian" ><img src="zuo.png" width=100px height=50px></div> <div class="show"> 1</div> <div class="anniu" id="jia"><img src="you1.png" width=100px height=50px></div></div>

关键词:实现

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭