使用jQuery来简单地实现产品显示和的滚动功能（示例代码）

最近，我想做一个产品展示功能。因为有很多产品，我不能完成一个屏幕，我想做一个点击页面，我在网上找不到很多。最后，我只能自己写了。

结果如下：
原理很简单：滚动CSS覆盖显示区域设置为隐藏，宽度设置为较高的值，如4000px，然后点击每个页面或计算当前页的下一页按钮时，如果你已经到了最后一页，然后回到第一页，通过左侧控制DIV属性实现滚动，需要两个div外设置相对div的div的位置，位置设置为绝对。

主要代码如下：

HTML：
复制代码代码如下所示：

箭产品展示
数据采集移动终端
数据采集移动终端
数据采集移动终端
数据采集移动终端
数据采集移动终端1
数据采集移动终端1
数据采集移动终端1

CSS：
复制代码代码如下所示：
{ #产品
宽度：720px；
身高：200px；
边境：1px solid # CCC；
保证金：0 5px 5px 0；
浮点数：左；
}
#产品{ div #内容
职位：相对；
宽度：690px；
身高：160px；
显示：内联块；
溢出：隐藏；
浮点数：左；
}
#产品{ div # content_list
位置：绝对；
宽度：4000px；
}
#产品DL {
宽度：160px；
身高：150px；
浮点数：左；
保证金：10px 4px；
填料：2px 2px；
}
#产品{ DL：悬停
边境：1px solid # 333；
背景：# CCC；
}
#产品DL DT {

}
#产品DL DT img {
宽度：160px；
身高：120px；
边界：无；
}
#产品DL DD {
文本对齐：中心；
}
#产品跨度。沪指{
光标：指针；
显示：内联块；
宽度：15px；
身高：150px；
背景：URL（。 /图像/ arrow_l .webp）没有重复左中心；
浮点数：左；
}
#产品跨下{。
光标：指针；
显示：内联块；
宽度：15px；
身高：150px；
背景：URL（。 /图像/ arrow_r .webp）没有重复左中心；
浮子：右边；
}

JS代码
复制代码代码如下所示：
$（函数（）{（））
var页面= 1；
var i = 4；每个版本放4张图片
返回按钮
$（下一步）（单击（函数））单击绑定事件
VaR的内容（div =美元#内容）；
无功content_list = $（div # content_list ）；
无功v_width = content.width（）；
VaR len = content.find（DL的长度）；
无功page_count = math.ceil（Len / / /我）；只要它不是整数，整数的最小的总方向
如果（！content_list.is（动画））{ / /内容显示区中动画的判断
如果（页= = page_count）{ / /一直到最后一页，如果回来，一定要跳到第一页。
content_list.animate（{左：'0px}，慢）； / /通过改变左值，跳转到第一页
页面= 1；
其他{ }
content_list.animate（：' = ' + v_width {左}，慢）； / /改变离开的价值，每一页
页+；
}
}
}）；
前进按钮
$（跨度。沪指）。Click（function（）{）
VaR的内容（div =美元#内容）；
无功content_list = $（div # content_list ）；
无功v_width = content.width（）；
VaR len = content.find（DL的长度）；
无功page_count = math.ceil（Len / / /我）；只要它不是整数，整数的最小的总方向
如果（！content_list.is（动画））{ / /内容显示区中动画的判断
如果（页= 1）{已到第一页，如果我们移动，必须跳转到最后一页。
content_list.animate（{左：=+ v_width *（page_count-1）}，慢）；
页= page_count；
其他{ }
content_list.animate（{左：+ = + v_width }，慢）；
页；
}
}
}）；
}）；