注意：一共有四张图片，但是在ul里要放六张图，次序为第一张，第二张，第三张，第四张，第一张，第二张。
因为如果放四张，那么在第三张和第四张时切换第一二张因为图片不一样会闪，放六张图片，最后的第一二张放完切换先前的第一二张，有两张一样的就覆盖了，（唉表达能力较差）。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
margin: 0;
padding: 0;
div {
width: 600px;
/*两张图的宽度*/
height: 161px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
list-style: none;
width: 1800px;
/*两张图的宽度*/
height: 161px;
background-color:#000;
ul>li {
float: left;
</style>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<script>
$(function () {
var offset = 0; //设置偏移位
var timer;
function autoPlay() { //设置这个函数是为了后面监听移入移出事件的移出后继续滚动
timer = setInterval(function () {
offset += -10;
if (offset <= -1200) {
//轮播完四张图开始从第五张开始
offset = 0;
$('ul').css('marginLeft', offset);
}, 50)
autoPlay();
$('li').hover(function () {
clearInterval(timer);
//给非当前添加蒙版
$(this).siblings().fadeTo(100, 0.5);
//去除当前选中的蒙版
$(this).fadeTo(100, 1);
}, function () {
autoPlay();
$('li').fadeTo(100, 1);//注意：这里不用this,用li
</script>
</head>
<li><img src="img/a.jpg" alt=""></li>
<li><img src="img/b.jpg" alt=""></li>
<li><img src="img/c.jpg" alt=""></li>
<li><img src="img/d.jpg" alt=""></li>
<li><img src="img/a.jpg" alt=""></li>
<li><img src="img/b.jpg" alt=""></li>
</body>
</html>
注意：一共有四张图片，但是在ul里要放六张图，次序为第一张，第二张，第三张，第四张，第一张，第二张。因为如果放四张，那么在第三张和第四张时切换第一二张因为图片不一样会闪，放六张图片，最后的第一二张放完切换先前的第一二张，有两张一样的就覆盖了，（唉表达能力较差）。<!DOCTYPE html><html lang="en"><head> ...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-...
可以使
图
片
滚动
容器ul
滚动
，为其设置margin-left，再加上动画效果
2、
图
片用什么来装呢？
可以用li，将其设置为block，进行背景
图
的设置，并且将其浮动并排。（这里也可以在li中包含img标签）
3、外层视觉窗口div用做些什么呢？
因为外层视觉窗口是父级，那么为其设置overflow:hidden; 这样视觉.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title&.
由于项目中使用第三方的轮
播
图
出现了崩溃情况，同时也想减少项目的依赖性，所以想自己实现一个轮
播
图
。实现这样一个轮
播
图
，可以使用UICollectionView或者UIScrollView，当然UICollectionView实现起来更容易一些。
实现一个
无限
循环
的轮
播
图
的主要难点是如何实现左右
无限
滑动，在知乎上搜的的答案 ios轮
播
图
实现原理？。
1.方案一
N张照片把contentsS...
动态创建一列
图
片，然后根据前一列
图
片再创建一列
图
片的复制品，当前一列
图
片全都
滚动
超过div最左侧时再让其回到最右边，同时复制品
图
片正在展示
滚动
，再当复制品
图
片也全
滚动
超过最左侧时，也让其回到最右边，这样就能达到
无限
滚动
的效果了
.popularProducts-cont{
position: relative;
width: 100%;
overflow: hidden;
display: flex;
margin-t
private TextView tv_title;
private LinearLayout dot_layout;
private ArrayList list = new ArrayList();
可以使用
jQuery
的animate()方法和定时器实现多段文字的
无限
循环
滚动
。具体步骤如下：
1. 将需要
滚动
的文字内容分段包裹在多个容器元素中，将每个容器元素的宽度设置为文字内容的宽度。
2. 使用定时器，每隔一定时间执行一次
滚动
动画。
3. 在
滚动
动画完成后，判断当前
滚动
到的位置是否超出容器元素的宽度，如果是，则将该容器元素移动到下一个容器元素的位置。
4.
循环
执行上面的步骤，实现多段文字的
无限
循环
滚动
。
下面是一个简单的示例代码：
HTML代码：
<div class="scroll-wrap">
<div class="scroll-content">
<div class="scroll-item">
<span>这是第一段需要
滚动
的文字</span>
<div class="scroll-item">
<span>这是第二段需要
滚动
的文字</span>
<div class="scroll-item">
<span>这是第三段需要
滚动
的文字</span>
CSS代码：
.scroll-wrap {
overflow: hidden;
.scroll-content {
display: inline-block;
white-space: nowrap;
.scroll-item {
display: inline-block;
JavaScript代码：
$(function() {
var $scrollWrap = $('.scroll-wrap');
var $scrollContent = $('.scroll-content');
var $scrollItems = $scrollContent.find('.scroll-item');
var scrollWidth = $scrollItems.eq(0).width();
var currentScrollIndex = 0;
// 将所有容器元素的宽度设置为相同的值
$scrollItems.width(scrollWidth);
// 定时器，每隔1秒执行一次
滚动
动画
setInterval(function() {
$scrollContent.animate({ marginLeft: '-=1px' }, 10, function() {
// 判断是否超出当前容器元素的宽度
if ($scrollContent.position().left <= -scrollWidth) {
// 将当前容器元素移动到下一个容器元素的位置
$scrollContent.append($scrollItems.eq(currentScrollIndex).clone());
$scrollContent.css({ marginLeft: 0 });
currentScrollIndex++;
if (currentScrollIndex >= $scrollItems.length) {
currentScrollIndex = 0;
}, 10);
在上面的代码中，我们通过将需要
滚动
的文字内容分段包裹在多个容器元素中，并将每个容器元素的宽度设置为文字内容的宽度。然后使用定时器每隔一定时间执行一次
滚动
动画，
滚动
完成后判断是否超出当前容器元素的宽度，如果是，则将该容器元素移动到下一个容器元素的位置。
循环
执行以上步骤，实现多段文字的
无限
循环
滚动
。
