50-jquery无限循环滚动图片

限轮播图效果

<!DOCTYPE html>

<html>

<head>

<title>50-jquery无限循环滚动图片</title>

margin: 0; /*外边距：0*/

padding: 0; /*内边距：0*/

}

div{

width: 600px; /*宽：600*/

height: 160px; /*高：160*/

border: #000000 solid 1px; /*边框：黑色实线 1像素*/

margin: 100px auto; /*外边距：上100像素左右自动居中*/

position: relative; /*定位：相对定位*/

overflow: hidden; /*溢出：隐藏*/

}

ul{

list-style: none; /*列表样式：无点*/

width: 2100px; /*宽：2100*/

height: 160px; /*高：160*/

}

ul>li{

float: left; /*浮动布局：左浮动*/

}

</style>

$(function(){

var pianyi=0; // 定义一个偏移量为0

var timer=setInterval(function(){ // 定义一个定时器 50毫秒调用一次

if(pianyi>-1500){ // 如果偏移量大于 -1500

$('ul').css('margin-left', pianyi) // 把ul的样式的左边距设置成偏移量

pianyi -=5 // 偏移量每次减5

}else{pianyi=0} // 否则（偏移量等于0）

}, 50)

})

</script>

</head>

<body>

<div>

</ul>

</div>

</body>

</html>

、首先看一看是什么效果？

2、一行background-attachment:fixed搞定镂空信息流广告

这个方法理论上是最简单效果也最好的方法。

CSS中有个background-attachment属性，当我们设置属性值为fixed的时候，背景图片相对于窗体定位，不受滚动影响。

于是，我们的实现就很简单：信息流列表HTML中插入个广告<a>链接，然后广告图作为背景图呈现，设置background-attachment:fixed效果就可以实现了，就这么简单。

HTML和CSS代码示意：

<div class="list">信息流列表1</div>
<div class="list">信息流列表2</div>
<a href="#" class="ad" target="_blank">广告</a>
<div class="list">信息流列表3</div>
<div class="list">信息流列表4</div>
.ad {
 display: block;
 height: 600px;
 background: url(./ad.jpg) no-repeat top fixed;
 background-size: 100%;
}

唯一的不足：iOS Safari不支持background-attachment:fixed

iOS Safari很早时候position:fixed也不支持，后来妥协了，支持了；但是background-attachment:fixed还是老样子，不支持，怕是嫌弃background-attachment:fixed烧性能，对于一个连IE6，IE7浏览器都支持良好的CSS声明，Safari不支持（包括iOS微信），我也无力说些什么。

因此，我们还需要额外做些功夫，兼容下iPhone手机浏览器。

我的做法是如果是iPhone手机，广告图片postion:fixed定位，配合JS实时clip剪裁。核心JS如下：

// ele就是广告元素DOM对象
window.addEventListener('scroll', function () {
 var bound=ele.parentElement.getBoundingClientRect();
 var clip='rect('+ [bound.top + 'px', ele.parentElement.clientWidth + 'px', bound.bottom + 'px', 0].join() +')';
 ele.style.clip=clip;
});

查了下浏览器兼容性资料，发现Android4.4+版本开始，放弃了对background-attachment:fixed的支持，但是Android Chrome浏览器却支持，这有些令人不解（见下图）。

我用家里人的Android手机测试，背景效果表现为scroll，看来JS补丁要多个Android设备。

3、position:fixed也可以实现藏在后面的信息流广告

position:fixed也可以实现藏在后面的信息流广告，实现原理就是藏在其他信息流元素的背后，以及头部或者底部元素（如果有）的底部，关键就是z-index层级控制了。虽然原理简单，但是实际操作还是有些啰嗦的，通常信息流页面的HTML结构都比较复杂，此时再z-index属性各种设置，很容易造成z-index混乱。

效果大致如下GIF截屏：

HTML和CSS代码原理示意：

<div class="list">信息流列表1</div>
<div class="list">信息流列表2</div>
<a href="#" class="ad" target="_blank">
 <img src="./ad.jpg">
</a>
<div class="list">信息流列表3</div>
<div class="list">信息流列表4</div>

.list {
 background-color: #fff;
 position: relative;
 z-index: 1;
}
.ad {
 display: block;
 height: 576px;
}
.ad img {
 position: fixed; top: 0;
 width: 400px;
}

优点和不足

基于position:fixed实现的优点在于：

1. 我们的广告内容可以支持复杂HTML，而不仅仅是一张图片；

2. 所有浏览器都兼容，包括iPhone Safari浏览器。

不足在于：

1. 需要其他元素进行层级配合，相互耦合增加了CSS的复杂度。

如果实际开发时候发现z-index层级控制比较麻烦，可以试试第一个demo中使用的CSS clip剪裁，直接只显示当前广告区域内容，不过需要JS配合，不是纯CSS实现了，自己权衡。

4、结束语

采用position:fixed固定定位实现的时候，我们还可以把广告元素从信息流列表中抽离，直接放在整个容器的后面，然后借助visibility属性实现点击穿透，如下示意：

<a href="#" class="ad">广告</a>
<ul>
 <li>信息流列表1</li>
 <li>信息流列表2</li>
 <li></li> <!-- 撑开高度 -->
 <li>信息流列表3</li>
 <li>信息流列表4</li>
</ul>

.ad {
 position: fixed;
}
ul {
 position: relative;
 visibility: hidden;
}
li:empty {
 /* 撑开高度，实际开发请使用类名控制，这里精简HTML才使用:empty */
 height: 576px;
}
li:not(:empty) {
 visibility: visible;
}

具体就不展开了。

英格兰凉了，比利时很强。

希望本文内容可以帮助需要的人。

然后，如果你有更好地实现方法，欢迎不吝赐教！

在Firefox中单独设置滚动条样式，你可以使用?@-moz-document??规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。

下面是一个例子，演示如何在Firefox中隐藏滚动条：

@-moz-document url-prefix() {
  /* 在这里添加只对Firefox生效的样式 */
  body {
    scrollbar-width: none;
  }
}

在上面的例子中，??@-moz-document url-prefix()??表示只有在URL以空字符串（即所有URL）为前缀的情况下，才会应用其中的样式。在??body??元素中，??scrollbar-width: none;??将隐藏滚动条。

请注意，这样的规则只在Firefox中生效，而在其他浏览器中会被忽略。确保在使用这样的规则时进行测试，以确保所需的效果在目标浏览器中按预期工作。

在CSS中，??*???（星号）和 ??body?? 分别选择不同的元素或元素集合。

*?（星号）选择器：这是通配符选择器，匹配文档中的所有元素。使用 * 会选择页面上的每个元素，无论是块级元素、行内元素还是其他类型的元素。例如：

* {
  margin: 0;
  padding: 0;
}

上述代码会将页面中所有元素的内外边距设置为零。

body? 选择器： 这是针对文档的 <body> 元素的选择器。body 选择器用于针对整个文档的主体部分应用样式。例如：

body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
}

上述代码会将文档主体部分的字体设置为 Arial，并将背景颜色设置为 #f0f0f0。

所以，??*??? 是一个通用的选择器，匹配所有元素，而 ??body??? 是特定于文档主体的选择器，用于选择文档主体元素并应用样式。在某些情况下，你可能希望使用 ??body?? 选择器，以更有针对性地影响文档的主要内容区域。

在最新的 Firefox 版本中，??-moz-scrollbar-thumb?? 伪类选择器已被弃用，取而代之的是使用更通用的 CSS Scrollbar 模块规范。为了在 Firefox 中优化滚动条并使其变细，你可以使用新的规范中的属性。

以下是一个简单的示例，可以使 Firefox 中的滚动条变细：

/* Firefox 滚动条样式 */
* {
  scrollbar-width: thin;
  scrollbar-color: #999999 #f0f0f0;
}

/* Webkit 滚动条样式（Chrome, Safari等）*/
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-thumb {
  background-color: #999999;
}

*::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

上述样式包含两部分：

??scrollbar-width?? 和 scrollbar-color 是 Firefox 滚动条样式的属性。scrollbar-width: thin; 会使滚动条变细，而 scrollbar-color 用于定义滚动条的颜色。在这里，滚动条颜色被设置为灰色 (#999999)，滚动条轨道的颜色被设置为淡灰色 (#f0f0f0)。
对于 Webkit 内核的浏览器（如 Chrome 和 Safari），使用 ::-webkit-scrollbar、::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 来定义滚动条样式。

请注意，滚动条样式在不同浏览器中可能会有所不同，因此上述样式在 Firefox 中有效，而 Webkit 样式在 Chrome 和 Safari 中有效。在实际使用中，你可能需要根据需要进行调整和测试，以确保在不同浏览器中都能达到预期的效果。

在线咨询

上一篇：HTML培训：如何在HTML中更改文本大小
下一篇：政治搜题软件大学？不妨看看这8个实用工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。