Как показано на рисунке.
Эффект переключения изображений прост в реализации и имеет хорошую совместимость.
HTML -страница выглядит следующим образом
Кода -копия выглядит следующим образом:
<div>
<div id = "Focus">
<ul>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/01.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/02.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/03.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/04.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/05.jpg"/> </a> </li>
</ul>
</div>
</div> <!-обертка->
</body>
Стиль CSS
Кода -копия выглядит следующим образом:
<стиль типа = "text/css">
* {маржа: 0; Надо: 0;}
тело {font-size: 12px; Цвет:#222; Семейство шрифта: Вердана, Ариал, Хельветика, Санс-Сэриф; Фон:#f0f0f0;}
.clearfix: после {content: "."; дисплей: блок; высота: 0; ясно: оба; видимость: скрыто;}
.clearfix {Zoom: 1;}
ul, li {list-style: none;}
img {border: 0;}
.wrapper {ширина: 800px; Поле: 0 Авто; надоеволос: 50px;}
/ * qqshop фокус */
#focus {width: 800px; Высота: 280px; переполнение: скрыто; позиция: относительно;}
#focus ul {высота: 380px; позиция: абсолютно;}
#focus ul li {float: left; Ширина: 800px; Высота: 280px; переполнение: скрыто; позиция: относительно; Фон:#000;}
#focus ul li div {позиция: абсолют; переполнение: скрыто;}
#focus .btnbg {position: Absolute; Ширина: 800px; Высота: 20px; слева: 0; Внизу: 0; Фон:#000;}
#focus .btn {position: Absolute; Ширина: 780px; Высота: 10px; Заполнение: 5px 10px; Справа: 0; Внизу: 0; Текст-альбом: справа;}
#focus .btn span {display: inline-block; _display: inline; _zoom: 1; Ширина: 25px; Высота: 10px; _font-размер: 0; Полевая левая: 5px; курсор: указатель; фон: #fff;}
#focus .btn span.on {founale: #fff;}
#focus .prenext {width: 45px; высота: 100px; позиция: абсолютно; Верх: 90px; Фон: URL (img/sprite.png) без повторного переписки 0 0; курсор: pointer;}
#focus .pre {Left: 0;}
#focus .next {right: 0; Справочная позиция: правая вершина;}
</style>
JS Script
Кода -копия выглядит следующим образом:
$ (function () {
var swidth = $ ("#фокус"). Width (); // Получить ширину карты фокусировки (область отображения)
var len = $ ("#фокус ul li"). Длина; // Получить количество фокус -изображений
var index = 0;
var dickimer;
// Следующий код добавляет цифровую кнопку и полупрозрачную панель за кнопкой, а также две кнопки на предыдущей странице и следующей странице
var btn = "<div class = 'btnbg'> </div> <div class = 'btn'>";
для (var i = 0; i <len; i ++) {
btn += "<pran> </span>";
}
btn += "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div>";
$ ("#фокус"). Append (btn);
$ ("#фокус .btnbg"). CSS ("непрозрачность", 0,5);
// Добавить слайд мыши в событие для маленькой кнопки, чтобы отобразить соответствующий контент
$ ("#Focus .btn Span"). CSS ("непрозрачность", 0,4) .mouseEnter (function () {
index = $ ("#фокус .btn Span"). Index (this);
Showpics (индекс);
}). EQ (0) .Trigger ("MouseEnter");
// предыдущая страница и обработка прозрачности кнопки следующей страницы
$ ("#фокус.
$ (this) .stop (true, false) .Animate ({"opocity": "0,5"}, 300);
}, function () {
$ (this) .stop (true, false) .Animate ({"opocity": "0,2"}, 300);
});
// Кнопка предыдущей страницы
$ ("#Focus .pre"). Click (function () {
Индекс -= 1;
if (index == -1) {index = len - 1;}
Showpics (индекс);
});
// Кнопка следующей страницы
$ ("#фокус .next"). Click (function () {
index += 1;
if (index == len) {index = 0;}
Showpics (индекс);
});
// Этот пример прокручивает влево и вправо, то есть все элементы LI плавают влево в одном и том же ряду, поэтому ширина периферических элементов UL должна быть рассчитана здесь.
$ ("#фокус уль"). CSS ("ширина", Swidth * (Len));
// Автопродажа останавливается, когда мышь скользят на фокусировке и начинается, когда мышь выдвигается.
$ ("#фокус"). Hover (function () {
ClearInterval (Pictimer);
}, function () {
pictimer = setInterval (function () {
Showpics (индекс);
index ++;
if (index == len) {index = 0;}
}, 4000); // Этот 4000 представляет интервал автоматического воспроизведения, блок: миллисекунды
}). Trigger ("MouseLeave");
// Показать функцию изображения, отобразить соответствующий контент в соответствии со значением полученного индекса
Функция Showpics (index) {// обычный коммутатор
var nowleft = -index*swidth; // Рассчитайте левое значение элемента UL на основе значения индекса
$ ("#фокусировать UL"). Stop (true, false) .animate ({"Left": nowleft}, 300); // прокручивать элемент UL через Animate () до рассчитанной позиции
// $ ("#фокус. // Переключиться на выбранное эффект для текущего кнопки
$ ("#фокус .btn span"). Stop (true, false) .animate ({"opactose": "0.4"}, 300) .eq (index) .stop (true, false) .animate ({"opacity": "1"}, 300); // Переключиться на выбранное эффект для текущего кнопки
}
});
Используется картинки левой и правой переключения