JavaScript-Imitations-Mall zur Implementierung von Image-Werberotationsbeispielcode_Javascript-Fähigkeiten

Ist Ihnen beim Stöbern im Einkaufszentrum schon einmal aufgefallen, dass auf der Homepage des Einkaufszentrums verschiedene Karussell-Werbung zu sehen ist? Der spezifische Inhalt lautet wie folgt:

1.HTML-Framework

Wie unten gezeigt, ist es in drei Teile unterteilt: Zuerst gibt es ein Div zum Speichern, dann ein UL zum Speichern von Bildern, ein UL zum Speichern von Zahlen und dann zwei Schaltflächen

<div class="out">
<ul class="img">
<li><img src="img/1.png" alt=""></li>
<li><img src="img/2.png" alt=""></li>
<li><img src="img/3.png" alt=""></li>
<li><img src="img/4.png" alt=""></li>
<li><img src="img/5.png" alt=""></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<input class="left btn" type="button" value="<">
<input class="right btn" type="button" value=">">
</div>

2.CSS-Konfiguration

Zunächst sollte das äußere Rahmenteil auf die gleiche Größe wie das Bild eingestellt und in der Mitte ausgerichtet werden. Die Position sollte auf relative Positionierung eingestellt werden, da die nachfolgenden Bilder und andere Bilder absolut relativ positioniert sind dieser große Rahmen

//div外框
.out{
width: 560px;
height: 350px;
margin: 0 auto;
position: relative;
border: 2px solid red;
}

Dann wird die Überlagerung der fünf Bilder durch das absolute Attribut erreicht. Da wir oben den übergeordneten Container auf „relativ“ setzen, werden die darin enthaltenen untergeordneten Elemente absolut relativ zum übergeordneten Div positioniert

.img {
list-style-type: none;
}
.img li{
position: absolute;
top:0;
cursor: pointer;
}

Die nächsten anderen Elemente werde ich mit Kommentaren in den Code schreiben

.num{
list-style-type: none;
/*这个属性会使得text-align失效,所以下面手动写上宽度即可*/
position: absolute;
width: 100%;
bottom:0;
text-align: center;
}
.num li{
width: 20px;
height: 20px;
/*行高这个属性使得元素垂直居中*/
line-height: 20px;
text-align: center;
/*inline-block使得所有元素按行排列*/
display: inline-block;
background-color: #4a4a4a;
color: #fff;
border-radius: 50%;
/*鼠标放上去会有小手*/
cursor: pointer;
}
/*鼠标放到图片上的时候才显示btn*/
.out:hover .btn{
display: block;
}
.btn{
width: 30px;
height: 50px;
position: absolute;
display: none;
/*通过top和margin来定位属性到垂直居中*/
top: 50%;
margin-top: -30px;
border: 0;
/*使用rgba可以修改透明度*/
background-color: rgba(0,0,0,.5);
color: #fff;
}
.right{
right: 0;
}

Der Effekt ist wie folgt:

3.jQuery-Kontrollkarussell

Manuelles Karussell realisieren

Das bedeutet, dass, wenn die Maus auf die Zahl unten bewegt wird, das entsprechende Bild angezeigt wird

//手动控制轮播图
$(".img li").eq(0).fadeIn(300);//加载页面的时候让第一个图片显示
$(".num li").eq(0).addClass("active");//给序号为1的加上红色背景
$(".num li").mouseover(function () {
//当前的数字显示红色背景,其他的数字都隐藏背景
$(this).addClass("active").siblings().removeClass("active");
//当前数字对应的图片显示,其他图片都隐藏
var index = $(this).index();
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
})

Automatisches Karussell

//实现自动轮播
var i = 0;//计时器控制数字
var t = setInterval(move,1500);
//该方法显示与序号对应的图片
function move() {
if (++i ==5){
i = 0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(300).siblings().stop().fadeOut(300);
}
//鼠标移入后停止自动轮播
$(".out").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move,1500);
});

Klickkarussell implementieren

//按钮移动事件
$(".right").click(function () {
move();
});
$(".left").click(function () {
i = i-2;
move();
});

Dynamische Steuerung der Li-Digitalanzeigemenge

Sie können die Anzahl der Tags anhand der Anzahl der Bilder steuern

//手动控制li数量
var size = $(".img li").size();
for (var k=1;k<=size;k++){
$(".num").append("<li>"+k+"</li>");
}
$(".num li").eq(0).addClass("active");