一.轮播图：
css:
*{
margin: 0;
padding: 0;
}
body{
height: 150vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(200deg,#00c5c5,#ffd8d8);
}
.container{
width: 650px;
display: flex;
/* 每个元素的间隔相等 */
justify-content: space-evenly;
/* 溢出隐藏 */
overflow: hidden;
border: 1px solid red;
/* -webkit-box-reflect: below ; */
}
.big-box{
width: 400px;
height: 500px;
/* 按照最小边长改变背景图片 */
background-size: cover;
transition: 0.4s;
}
.small-box{
width: 200px;
height: 500px;
/* 垂直均匀排列每个元素 */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.small-box .img{
/* 相对定位 */
position: relative;
width: 200px;
height: 90px;
right: 0;
transition: 0.5s;
}
.small-box .img img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
right: 0;
/* 设置过滤 */
transition: 0.5s;
}
.small-box .img.active{
opacity: 0;
right: 250px;
}
.small-box .img:hover img{
opacity: 0;
right: 250px;
}
html:
<div class="container">
<div class="big-box"></div>
<div class="small-box">
<div class="img"><img src="./images/ou_1.jpg" alt=""></div>
<div class="img"><img src="./images/ou_2.jpg" alt=""></div>
<div class="img"><img src="./images/ou_3.jpg" alt=""></div>
<div class="img"><img src="./images/ou_4.jpg" alt=""></div>
<div class="img"><img src="./images/ou_5.jpg" alt=""></div>
</div>
</div>
js:
// 获取需要操作的元素
// 左边大图
let bigBox = document.querySelector(".big-box");
// 图片集合
let imgs = document.getElementsByClassName("img");
// 定时器
let timer = null;
// 当前图片的下标
let index = 0;
// 重置函数
function reset(){
for(let i=0; i<imgs.length;i++){
imgs[i].className="img";
}
}
// 选中函数
function selected(){
reset();
imgs[index].className="img active";
}
function play(){
timer = setInterval(function(){
selected();
index++;
bigBox.style.backgroundImage="url(./images/ou_"+index+".jpg)";
if(index==5){
index=0;
}
},1500);
}
// 循环绑定每一个小图片的鼠标移动事件
for(let i=0; i<imgs.length; i++){
// 鼠标移动到小图片触发
imgs[i].οnmοusemοve=function(){
// 左边大图变成当前小图片
bigBox.style.backgroundImage="url(./images/ou_"+(i+1)+".jpg)";
debugger
console.log("q")
console.log("pic="+bigBox.style.backgroundImage)
// 执行重置函数
reset();
clearInterval(timer);
// 更新当前图片下标执行轮播
index=i+1;
if(index==5){
index=0;
}
play();
}
}
play();
效果显示：
二.滚动显示:
css:
* {
box-sizing: border-box;
}
body {
background-color: aliceblue;
font-family: "Courier New", Courier, monospace;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
}
h1 {
margin: 10px;
}
.block {
background-color: burlywood;
color: azure;
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 250px;
margin: 10px;
border-radius: 10px;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
transform: translateX(400%);
transition: transform 0.4s ease;
}
.block:nth-of-type(even) {
transform: translateX(-400%);
}
.block.show {
transform: translateX(0);
}
.block h2 {
font-size: 18px;
letter-spacing: 5px;
}
html:
<body>
<h1>公司记事</h1>
<div class="block">
<h2>
1990年，我们的公司，华星醋业，作为一家专注于传统酿造醋的公司，
在山东济南成立。我们的初衷是传承和发扬中国的醋酿造技艺，同时为消费者提供健康、美味的食品。
</h2>
</div>
<div class="block">
<h2>
1995年，我们成功研发出华星牌陈醋，以其独特的口感和优良的品质，迅速在市场上赢得了良好的口碑。我们的产品开始走出山东，进入全国市场。
</h2>
</div>
<div class="block">
<h2>
2000年，我们进一步扩展生产规模，投资建设了新的生产基地，引进了先进的生产设备和技术，以提升我们的产品质量和生产效率。
</h2>
</div>
<div class="block">
<h2>
2010年，华星醋业成为国内领先的醋公司之一，我们的产品已经覆盖了全国大部分地区，并开始进入国际市场。
</h2>
</div>
<div class="block">
<h2>
2020年，我们继续深化对产品研发的投入，成功开发出多款新品，包括有机醋、果醋等，以满足不同消费者的需求。同时，我们也加强了对产品质量的把控，确保每一瓶华星醋都能达到我们自己的高标准。
</h2>
</div>
<div class="block">
<h2>
2025年，华星醋业已经成为了全球知名的醋公司，我们的产品在全球范围内得到了广泛的认可和喜爱。我们将继续坚守初心，为消费者提供更多高品质、健康的食品。
</h2>
</div>
<div class="block">
<h2>
未来，华星醋业将继续秉承传统酿造工艺，同时结合现代科技，不断推陈出新，为消费者提供更多更好的产品。我们希望通过我们的努力，让更多的人了解和喜爱中国的传统食品文化。
</h2>
</div>
</body>
js:
const boxes = document.querySelectorAll(".block");
window.addEventListener("scroll", checkBoxes);
checkBoxes();
function checkBoxes() {
const triggerBottom = (window.innerHeight / 5) * 4;
boxes.forEach((box) => {
const boxTop = box.getBoundingClientRect().top;
if (boxTop < triggerBottom) {
box.classList.add("show");
} else {
box.classList.remove("show");
}
});
}
效果显示：
注（当滚轮下滑是文本框从左右滑动到中间显示）
三.视差显示：
css:
*{
margin: 0;
padding: 0;
}
body{
height: 200vh;
}
.bg{
background-image: url(../images/背景图2.jpg);
background-size: cover;
background-position: 50% 50%;
height: 200vh;
font-size: 300px;
font-weight: 900;
text-align: center;
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
overflow: hidden;
padding-top: 100px;
}
.bg::before{
content: "";
background-image: inherit;
background-size: cover;
background-position: 50% 50%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -99;
}
h2{
position: absolute;
top: 0px;
width: 100%;
text-align: center;
letter-spacing: 8px;
color: #000000;
}
h1{
letter-spacing: 10px;
position: absolute;
top: 145vh;
left: 50%;
transform: translateX(-50%);
width: 60%;
color: #fff;
padding: 100px 0;
text-align: center;
background-color: rgba(0, 0,0, 0.5);
}
html:
<body>
<h2>老师，滚动一下看看呗</h2>
<div class="bg">
<span>酸洗你公司文化</span>
</div>
<h1>我们的企业文化是围绕“健康、品质、服务”的理念建立的，这些词语不仅是我们的口号，也是我们每天工作的指导原则</h1>
</body>
js:
<script type="text/javascript">
const bg=document.querySelector(".bg");
document.addEventListener("scroll",
function(){
const scrollY=window.scrollY;
if(scrollY!=0){
bg.style.backgroundPosition = `calc(50% - ${scrollY}px) calc(50% - ${scrollY}px)`;
}else{
bg.style.backgroundPosition="";
}
})
</script>
效果显示：
滑动前：
滑动后：
这个js做好看的秘诀就是有一张好看的背景图
