Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.
CSS-стиль:
.ad {
margin-bottom:10px;
width:586px;
height:150px;
overflow:hidden;
position:relative;
}
.slider,. .num{
position:absolute;
}
.slider li{
list-style:none;
display:inline;
}
.slider img{
width:586px;
height:150px;
display:block;
}
.num{
right:5px;
bottom:5px;
}
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
HTML-код:
<div class="ad">
<ul class="slider">
<li>
<img src="images/ads/1.gif" /></li>
<li>
<img src="images/ads/2.gif" /></li>
<li>
<img src="images/ads/3.gif" /></li>
<li>
<img src="images/ads/4.gif" /></li>
<li>
<img src="images/ads/5.gif" /></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
код jQuery:
//Получаем высоту изображения
var height = $(".content_right .ad").height();
//Получаем количество изображений
var imgcount = $(".slider li").length;
// Установить значение индекса
var index = 0;
//Устанавливаем таймер
function time() {
timer = setInterval(function () {
//Номер ссылки отображается вместе с изображением
changeImg(index);
index++;
//Когда значение индекса равно количеству картинок, индекс становится 0
if (index == imgcount) {
index = 0;
}
}, 1500);
}
time();
//Цифры отображаются вместе с картинкой
function changeImg(index) {
//Изменяем верхнее значение изображения, чтобы добиться прокрутки
$(".slider").stop(true, false).animate({ top: -height * index }, 1200);
//Сначала удаляем, а затем добавляем еще
$(".num li").removeClass("on").eq(index).addClass("on");
}
//Подводим мышку к номеру, чтобы отобразить картинку
$(".num li").mouseover(function () {
//Индекс равен текущему индексу
index = $(this).index();
//Номер ссылки отображается вместе с изображением
changeImg(index);
});
//Наведите указатель мыши на карусель и выведите ее из нее, чтобы остановить и начать
$(".ad").hover(function () {
clearInterval(timer);
}, function () {
time();
});
Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Данный сайт лишь предоставляет услуги по хранению информации, не имеет никаких прав собственности и не несет соответствующей юридической ответственности. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.
Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/196269.html Исходная ссылка: https://javaforall.cn