이미지 광고 회전 예제 code_javascript 기술을 구현하는 JavaScript 모방 몰

쇼핑몰을 둘러보실 때, 쇼핑몰 홈페이지에 다양한 캐러셀 광고가 있다는 것을 아셨나요? 구체적인 내용은 다음과 같습니다.

1.HTML 프레임워크

아래와 같이 세 부분으로 나누어져 있습니다. 먼저 그것을 담는 div, 그 다음에는 사진을 저장하는 ul, 숫자를 저장하는 ul, 그리고 두 개의 버튼이 있습니다

<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 구성

우선 외부 프레임 div를 사진과 같은 크기로 설정하고 중앙에 정렬해야 합니다. 이후의 사진과 기타 이미지는 절대적으로 상대적인 위치에 있기 때문입니다. 이 큰 액자

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

그런 다음 절대 속성을 통해 그림 5개를 중첩합니다. 위의 상위 컨테이너를 상대 항목으로 설정했기 때문에 내부의 하위 요소는 상위 div를 기준으로 절대적으로 배치됩니다.

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

다음 다른 요소는 주석과 함께 코드에 작성하겠습니다

.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;
}

효과는 다음과 같습니다.

3.jquery 제어 캐러셀

수동 캐러셀 구현

아래 숫자로 마우스를 이동하면 해당 그림이 나타난다는 뜻입니다

//手动控制轮播图
$(".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);
})

자동 캐러셀

//实现自动轮播
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);
});

클릭 캐러셀 구현

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

li 디지털 디스플레이 수량의 동적 제어

사진 개수에 따라 태그 개수를 조절할 수 있습니다

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