CSS+HTML
}
$(document).ready(function () {
// ---------------初始化参数-----------------
//给box设置总宽
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲container").wid…("#container").children() * itemCreatItem.width)
//给shade遮罩设置宽高
$("#swipper").width(itemCreatItem.width)
$("#swipper").height(itemCreatItem.height)
// 给第一个方块设置值
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲container secti…("#container").children().length - 2)
// 给最后一个方块设置值
$("#container section").last().text(1)
//执行小圆点默认图片初始化
//偏移初始化
$("#container").css("left", -itemCreatItem.width)
// 索引初始化
var $index = 1;
// ---------小圆点初始化--------------
var $itemList = $("#itemList")
// 圆点父节点的宽度为个数*40
$("#itemList").width(($("#container").children().length - 2) * 40)
// 执行创建小圆点函数
creat($itemList)
function creat($itemList) {
for (var $i = 0; $i < $("#container").children().length - 2; $i++) {
var $item = $("<li></li>")
// 为什么这里index赋值不上
$item.index = $i;
$item.css("cursor", "pointer")
$itemList.append($item)
}
for (var $i = 0; $i < $("#container").children().length - 2; $i++) {
// 赋值标签
// 问:为什么用[]可以,用$.eq就不可以-=---------------------------------------
$("#itemList li")[$i].index = $i;
// $paragraphBtnItemArrary.eq($count).index = $i;
}
}
// 赋值
pointCssChange(0)
// startTime()
// ----------------初始化结束------------------
// ------左右点击事件----------
$("#nextBtn").click(function () {
$index++;
moveEvent($index)
})
$("#prevBtn").click(function () {
$index--;
moveEvent($index)
})
// ---------小圆点点击--------------
$("#itemList li").click(function ($event) {
$pointTemp = $event.target.index + 1
moveEvent($pointTemp)
$index = $pointTemp
// $("#itemList li").eq($event.target.index).addclass(".point")
pointCssChange($event.target.index)
});
// ---------------以为小圆更换图片----------------
function pointCssChange(number) {
$("#itemList li").css({ "background": "#ffffff" });
$("#itemList li").eq(number).css({ "background": "gray" });
}
// ----------------以上为小圆点操作----------------
// ---------------以下为自动轮播---------------
//默认定时器
var timer = setInterval(function () {
$index++;
moveEvent($index)
}, 3000)
// -------移动方法-----------
function moveEvent($event) {
// 清空定时器
closeTimeEvent()
//开启定时器
startTimeEvent()
$("#container").css("transition", "all 0.5s")
$("#container").css("left", $event * (-itemCreatItem.width) + "px")
pointCssChange($event - 1)
if ($event >= itemCreatItem.number - 1) {
pointCssChange(0)
setTimeout(function () {
console.log(1)
$index = 1;
$("#container").css("transition", "none")
$("#container").css("left", $index * (-itemCreatItem.width) + "px")
}, 500)
return;
}
if ($event <= 0) {
setTimeout(function () {
console.log(1)
$index = itemCreatItem.number - 2;
$("#container").css("transition", "none")
$("#container").css("left", $index * (-itemCreatItem.width) + "px")
}, 500)
return;
}
}
//鼠标悬停是否关闭
// $("#swipper").on("mouseenter", function () {
// closeTimeEvent()
// })
// $("#swipper").on("mouseleave", function () {
// startTimeEvent()
// })
// 关闭定时器
function closeTimeEvent()
{
if(timer!=null)
{
clearInterval(timer)
console.log("我清空了定时器")
timer = null
}
}
//开启定时器
function startTimeEvent()
{
if (timer == null) {
timer = setInterval(function () {
console.log("我开启了定时器")
$index++;
moveEvent($index)
}, 3000)
}
}
});