HTML:
<div class="hot">
<div class="hot-pics">
<ul>
<li><img src="./images/hot_1.jpg"/></li>
<li><img src="./images/hot_2.jpg"/></li>
<li><img src="./images/hot_3.jpg"/></li>
<li><img src="./images/hot_4.jpg"/></li>
<li><img src="./images/hot_5.jpg"/></li>
</ul>
</div>
<div class="hot-bar">
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JavaScript:
<script>
//焦点图切换功能
$(function () {
var height = 382; //每张图片的高度
var speed = 700; //动画时间
var delay = 1500; //自动切换的间隔时间
var now = 0; //当前显示的图片的索引
var max = 4; //图片的最大索引
//实现图片无缝切换
var $picsUI = $(".hot-pics ul");//获取对象
//复制列表中的第一个图片,追加到列表的最后
$picsUI.find("li:first").clone().appendTo($picsUI);
var $barLi = $(".hot-bar li"); //获取对象
//设置周期计时器,实现图片的自动切换
var timer = setInterval(changeAuto, delay);
//鼠标滑过时暂停移动,移除时恢复移动
$(".hot").on({
mouseenter: function () {
clearInterval(timer);
},
mouseleave: function () {
clearInterval(timer);
timer = setInterval(changeAuto, delay);
}
});
//单击小圆点切换图片
$barLi.click(function () {
now = $(this).index();
changeNext();
changeBar();
});
//图片自动切换
function changeAuto() {
if (!$picsUI.is(":animated")) {
if (now < max) {
now += 1;
changeNext();
} else {
now = 0;
changeFirst();
}
changeBar();
}
}
//切换到下一张图片
function changeNext() {
$picsUI.animate({top: -height * now}, speed);
}
//切换到第一张图片
function changeFirst() {
$picsUI.animate({top: -height * (max + 1)}, speed, function () {
$(this).css("top", 0);
});
}
//点亮当前小圆点
function changeBar() {
$barLi.eq(now).addClass("current").siblings().removeClass("current");
}
});
</script>