(1)html布局:
<div id="rotation">
<ul>
<li><img src="imgs/6.png"></li>
<li><img src="imgs/1.png"></li>
<li><img src="imgs/2.png"></li>
<li><img src="imgs/3.png"></li>
<li><img src="imgs/4.png"></li>
<li><img src="imgs/5.png"></li>
<li><img src="imgs/6.png"></li>
<li><img src="imgs/1.png"></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<button id="rotate_left">></button>
<button id="rotate_right"><</button>
</div>
(2)css:
#rotation {
overflow: hidden;
color: white;
position: relative;//父元素相对定位,
margin: 0 auto;
width: 600px;
height: 600px;
}
#rotation>ul {
width: 4800px;
position: absolute;//子元素绝对定位
left: -600px;
}
#rotation>ul>li {
width: 600px;
float: left;
}
#rotation>ol {
position: absolute;
top: 70%;
left: 40%;
}
#rotation>ol>li {
margin-left: 5px;
width: 25px;
height: 25px;
border-radius: 25px;
line-height: 25px;
text-align: center;
background-color: black;
float: left;
}
#rotation>button:nth-child(3) {
position: absolute;
top: 30%;
left: 94%;
width: 30px;
height: 80px;
background-color: red;
}
#rotation>button:nth-child(4) {
position: absolute;
top: 30%;
width: 30px;
height: 80px;
background-color: red;
}
(3js代码:
<script src="../../../lib/jquery-3.6.0.min.js"></script>
<script>
var rotate = $('#rotation');
var ul = $('#rotation>ul');
var oli = $('#rotation>ol>li');
var rotate_right = $('#rotation>#rotate_right');
var rotate_left = $('#rotation>#rotate_left');
var index = 0;//负责下面的小li
var n = 1;//次数,默认是1开头,因为ul的left值是-600px
oli.eq(0).css('background-color', 'red').siblings().css('background-color', '');//初始第一个li颜色
rotate_left.on('click', function () {
index++;
if (index >= 6) {//判断小圆点
index = 0;
}
oli.eq(index).css('background-color', 'red').siblings().css('background-color', '');
n++;
if (n == 8) {//点击次数,因为前后加了一张最后的图片和第一张图片,不熟悉可以边点击边
n = 2;
ul.css('left', -600);//回到开头
}
ul.stop().animate({
left: -600 * n,//做动画
})
})
rotate_right.on('click', function () {
index--;
if (index == -1) {
index = 5;
}
oli.eq(index).css('background-color', 'red').siblings().css('background-color', '');
n--;
if (n == -1) {
n = 5;
ul.css('left', -600 * (n + 1));
}
ul.stop().animate({
left: -600 * n,
})
})
var timer = setInterval(function () {
rotate_left.click();//点击事件放在定时器,每1秒自动点击一次,会自动轮播
}, 1000)
rotate.on({//进入和离开清除定时器和开启定时器
mouseenter: function () {
clearInterval(timer);
},
mouseleave: function () {
timer = setInterval(function () {
rotate_left.click();
}, 1000)
}
})
oli.on('mouseenter', function () {
$(this).css('background-color', 'red').siblings().css('background-color', '');
n = $(this).index() + 1;//下面小圆点移入显示对应图片,获取下标赋值给一个张图
index = $(this).index();
ul.stop().animate({
left: -600 * n,
})
})
</script>