Skip to content

Instantly share code, notes, and snippets.

@RagtagGeoduck

RagtagGeoduck/1111style.css

Last active February 20, 2021 03:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RagtagGeoduck/6ba3f5dfefe1b07f241342a6e71f3f9a to your computer and use it in GitHub Desktop.
Save RagtagGeoduck/6ba3f5dfefe1b07f241342a6e71f3f9a to your computer and use it in GitHub Desktop.
Download ZIP
[轮播图]P3415.06-轮播图按钮 #JavaScript
Raw
1111style.css
img {
display: block;
}
html,
body {
height: 100%;
overflow: hidden;
}
.banner {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}
.banner .bannerList {
position: absolute;
left: 0;
top: 0;
width: 1800px;
height: 300px;
overflow: hidden;
}
.banner .bannerList li {
float: left;
width: 300px;
height: 300px;
}
.banner .bannerList li img {
width: 100%;
height: 100%;
}
.banner .left,
.banner .right {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 50px;
height: 80px;
font-size: 40px;
text-align: center;
line-height: 80px;
background-color: grey;
opacity: 0;
transition: opacity 1s;
}
.banner .left {
left: 0;
}
.banner .right {
right: 0;
}
.banner .iconList {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
overflow: hidden;
}
.banner .iconList li {
float: left;
width: 20px;
height: 20px;
background-color: gray;
border-radius: 50%;
margin-right: 5px;
}
.banner .iconList li.current {
background-color: red ;
}
/*# sourceMappingURL=1111style.css.map */
Raw
1111style.less
img{
display: block;
}
html,body{
height: 100%;
overflow: hidden;
}
.banner{
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
overflow: hidden;
.bannerList{
position: absolute;
left: 0;
top: 0;
width: 1800px;
height: 300px;
overflow: hidden;
li{
float: left;
width: 300px;
height: 300px;
img{
width: 100%;
height: 100%;
}
}
}
.left,.right{
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 50px;
height: 80px;
font-size: 40px;
text-align: center;
line-height: 80px;
background-color: grey;
opacity: 0;
transition: opacity 1s;
}
.left{
left: 0;
}
.right{
right: 0;
}
.left:hover,.right:hover{
}
.iconList{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
overflow: hidden;
li{
float: left;
width: 20px;
height: 20px;
background-color: gray;
border-radius: 50%;
margin-right: 5px;
}
li.current{
background-color: red ;
}
}
}
Raw
15.06-轮播图按钮效果.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/1111style.css">
</head>
<body>
<div class="banner">
<ul class="bannerList">
<!-- 无缝操作的结构需要在最后加入第一张，在第一张前加入最后一张-->
<li>
<img src="img/3.jpg" alt="">
</li>
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/2.jpg" alt="">
</li>
<li>
<img src="img/1去.jpg" alt="">
</li>
<li>
<img src="img/3.jpg" alt="">
</li>
<li>
<img src="img/1.jpg" alt="">
</li>
</ul>
<ul class="iconList">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="left"> < </span>
<span class="right"> > </span>
</div>
<script type="text/javascript">
var box = document.querySelector('.banner');
var left = document.querySelector('.banner .left');
var right = document.querySelector('.banner .right');
var bannerList = document.querySelector('.banner .bannerList');
var iconItems = document.querySelectorAll('.banner .iconList li');
var timeAll = 600; // 总时间600ms
var timeStep = 20; // 走20步
var timer = null;
var isMove = false; // 专门针对多次点击
var autoTimer = null; // 自动播放定时器
// 轮播图无缝链接设置第一张
bannerList.style.left = -300 + 'px';
box.onmouseover = function (){
left.style.opacity = 1;
right.style.opacity = 1;
clearInterval(autoTimer);
}
box.onmouseout = function (){
left.style.opacity = 0;
right.style.opacity = 0;
autoRun();
}
right.onclick = function (){
move(true);
}
left.onclick = function (){
move(false);
}
function move(flag){
// 点击走一次的距离是-300
// 元素最终位置已知
// 判断元素是否在移动
// 处理元素点击，连续移动bug
if(isMove){
return;
}
isMove = true;
setTimeout(function (){
isMove = false;
},700);
if(typeof flag == 'boolean'){
if(flag){
var dis = -300;
}else {
var dis = 300;
}
}else {
var dis = flag - bannerList.offsetLeft; // 点击小圆点传的是元素最终位置，通过这个最终位置拿到移动的距离
}
// var dis = -300; // 点击一次元素走的距离
var lastDis = bannerList.offsetLeft + dis; // 求元素最终的距离
var step = dis/(timeAll/timeStep); // 求每一步走的距离
timer = setInterval(function (){
var left = bannerList.offsetLeft + step;
if(left === lastDis){
clearInterval(timer);
// 添加无缝逻辑
if(left === -1500){
left = -300;
}else if(left === 0){
left = -1200;
}
}
bannerList.style.left = left + 'px';
},timeStep);
// 小圆点变色问题
var index = Math.abs(lastDis / 300) -1;
if(index < 0){
index = 3; // 图片数变化修改处
}
for (var i=0;i<iconItems.length;i++){
iconItems[i].className = 'null';
}
iconItems[index%4].className = 'current';
autoIndex = index%4 + 1;
}
// 点击小圆点排他进行变色
var iconList = document.querySelectorAll('.banner .iconList li');
for(var i=0;i<iconList.length;i++){
iconList[i].onclick = function (){
for(var j=0;j<iconList.length;j++){
iconList[j].className = '';
}
this.className = 'current';
}
}
// 点击小圆点，移动到对应图片
for (var j =0;j<iconItems.length;j++){
iconItems[j].index = j;
iconItems[j].onclick = function (){
move(-(this.index + 1)* 300);
autoIndex = this.index + 1; // 更新自动轮播的图片下标
}
}
// 自动轮播
// 定时器
var autoIndex = 1;
autoRun();
// 因为定时器需要重新调用，封装定时器重复调用
function autoRun(){
autoTimer = setInterval(function (){
autoIndex ++;
move(autoIndex * -300);
if(autoIndex === 5){ // 图片数修改变化处
autoIndex = 1;
}
console.log(autoIndex);
},1000);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment