整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
限輪播圖效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>50-jquery無限循環滾動圖片</title>
<style type="text/css">
*{
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>
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(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 class="ul1">
<li><img src="../static/image/1.jpeg" width="300px" height="160px"></li>
<li><img src="../static/image/2.jpeg" width="300px" height="160px" ></li>
<li><img src="../static/image/3.jpeg" width="300px" height="160px" ></li>
<li><img src="../static/image/4.jpeg" width="300px" height="160px" ></li>
<li><img src="../static/image/5.jpeg" width="300px" height="160px" ></li>
<li><img src="../static/image/1.jpeg" width="300px" height="160px"></li>
<li><img src="../static/image/2.jpeg" width="300px" height="160px" ></li>
</ul>
</div>
</body>
</html>
這個方法理論上是最簡單效果也最好的方法。
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很早時候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設備。
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實現了，自己權衡。
采用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 {
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;
}上述樣式包含兩部分：
請注意，滾動條樣式在不同瀏覽器中可能會有所不同，因此上述樣式在 Firefox 中有效，而 Webkit 樣式在 Chrome 和 Safari 中有效。在實際使用中，你可能需要根據需要進行調整和測試，以確保在不同瀏覽器中都能達到預期的效果。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
