css + body部分 注意img父级的设置
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#box {
height: 260px;
width: 500px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
/* 这里img的父级xian不设置宽度 */
/* 下面根据图片的数量 */
#box div {
position: absolute;
top: 0;
left: 0;
}
#box div img {
width: 500px;
height: 260px;
float: left;
}
.but .right {
height: 50px;
width: 50px;
position: absolute;
left: 450px;
top: 105px;
}
.but .left {
height: 50px;
width: 50px;
position: absolute;
top: 105px;
left: 0;
}
.dian {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
}
.dian li {
float: left;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: #E84A7E;
margin: 0 5px;
}
.dian .act {
background-color: papayawhip;
}
</style>
<body>
<div id="box">
<div id="box1">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/1.jpg" />
</div>
<div class="but">
<button class="right">>>></button>
<button class="left"><<<</button>
</div>
<ul class="dian">
</ul>
</div>
</body>
js部分
<script src="jquery.js"></script>
<script>
// 1选择元素
var $box = $("#box1")
var $img = $box.find("img")
var $right = $(".right")
var $left = $(".left")
var $dian = $(".dian")
// 2获取图片的个数
var num = $img.length;
// 3给img的父级设置宽度 数量*1个的宽度
$box.width($img.length * $img.width())
console.log($img.width())
// $box[0].style.width = $img.length * $img.width() +"px"
// console.log($box.width())
// 设置图片起始索引
var index = 0
//4点击右按钮是
//因为是让img的直接父级滚动
//如果不在最后加上第一张的话,
//当动画走到最后一张时再点击的时候应该是到第一张,
//但是这个时候第一张会从右边出来,所以,
//在最后添加一个img
// 改变index的值为1
$right.on("click", function() {
if (index === num - 1) {
//5不加不在最后加上第一张的为0
// index = 0
index = 1
// 6当它走到最后的时候,再点击还是会从右边出来
// 所以强行把box1这个盒子回到最开始的位置
$box[0].style.left = 0 + "px"
} else {
index++
}
// console.log(index)
$box.stop().animate({
// 7每点击一次走的长度 当前这个图片*一个图片的宽度
left: -index * $img.width()
})
//10将class属性设置给当前图片的索引,图片走到谁身上,第几个小点点就变色
$dian.find("li").eq(index).addClass("act").siblings().removeClass()
})
$left.on("click", function() {
if (index === 0) {
//点击左按钮的时候,设置索引 和 box1走到最后 之后的位置
index = $img.length - 2
$box[0].style.left = -($img.length) * $img.width() + "px"
// console.log($box[0].style.left)
} else {
index--
}
// console.log(index)
$box.stop().animate({
left: -index * $img.width()
})
//10将class属性设置给当前图片的索引,图片走到谁身上,第几个小点点就变色
$dian.find("li").eq(index).addClass("act").siblings().removeClass()
})
var str = ""
// 8循环遍历num,给ul加li
for (var i = 0; i < num; i++) {
str += `<li></li>`
}
$dian.html(str)
// 9并且给第一张加上class属性
$dian.find("li").eq(0).addClass("act")
//11 开启计时器,执行点击事件
//相当于每隔一定的时间去点击了一次左右按钮
// 注意 用到click的方法
var time;
time = setInterval(function() {
$right.click()
}, 3000)
//12 hover方法
//鼠标进入 停止自动轮播
//鼠标移出 开启
$box.hover(function() {
clearInterval(time)
}, function() {
time = setInterval(function() {
$right.click()
}, 3000)
})
//13 最难理解的一步 click根据需要可以改成mouseenter
//鼠标点击的是谁 获取当前的索引值 给它保存到actindex上 并设置给index
$dian.find("li").on("click", function() {
var actindex = $(this).index()
index = actindex
//并让当前的点击的开启
$box.stop().animate({
left: -index * $img.width()
})
//点击的这个小点点加上属性
$dian.find("li").eq(index).addClass("act").siblings().removeClass()
})
</script>
原文地址：https://www.cnblogs.com/shun1015/p/11588397.html
时间： 2025-01-10 16:32:47