网页轮播图

最新推荐文章于 2024-10-16 10:00:51 发布

孙行者ღ

最新推荐文章于 2024-10-16 10:00:51 发布

阅读量222

点赞数 1

本文链接：https://blog.csdn.net/m0_51443864/article/details/121719329

版权

网页轮播图

效果图
在这里插入图片描述

index.html页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页轮播图</title>
	<link rel="stylesheet" type="text/css" href="bt.css"/>
	<script src="animate.js"></script>
	<script src="bt.js"></script>
</head>

<body>
	<div class="main"><a href="#" class="left">&lt;</a> <a href="#" class="right">&gt;</a>
	  <ul>
		<li><a href="#"><img alt="" src="images/bt1.jpg"></a></li>
			<li><a href="#"><img alt="" src="images/bt2.jpg"></a></li>
			<li><a href="#"><img alt="" src="images/bt3.jpg"></a></li>
			<li><a href="#"><img alt="" src="images/bt4.jpg"></a></li>
		</ul>
		<ol class="circle">
			
		</ol>
	</div>
</body>
</html>

css样式bt.css

@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
.main{
	position: relative;
	width: 1152px;
	height: 300px;
	margin: 100px auto;
	overflow: hidden;
}
.left{
	display: none;
	text-decoration: none;
	position: absolute;
	z-index: 2;
	top:50%;
	left: 0;
	width: 20px;
	height: 30px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	margin-top: -15px;
	background: rgba(0,0,0,0.3);
	text-align: center;
	line-height: 30px;
	color: #FFF;
	font-size: 18px;
}
.right{
	display: none;
	text-decoration: none;
	position: absolute;
	z-index: 2;
	top:50%;
	right: 0;
	width: 20px;
	height: 30px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	margin-top: -15px;
	background: rgba(0,0,0,0.3);
	text-align: center;
	line-height: 30px;
	color: #FFF;
	font-size: 18px;
}
ul,ol{
	list-style: none;
}
ul{
	position: absolute;
	left: 0;
	top: 0;
	width: 600%;
}
ul li{
	float: left;
}
.circle{
	position: absolute;
	width: 80px;
	left: 50%;
	margin-left: -40px;
	bottom: 10px;
}
.circle li{
	float:left;
	width:8px;
	height:8px;
	border:2px solid #ff5000;
	border-radius: 6px;
	margin: 0 4px;
	cursor: pointer;/*鼠标经过显示小手*/
}
.c{
	background-color: #ff5000;
}

js部分
animate.js

function animate(obj,target,callback){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var step=(target-obj.offsetLeft)/10;
		step=step>0?Math.ceil(step):Math.floor(step);
		if(obj.offsetLeft==target){
			clearInterval(obj.timer);
			if(callback){
				callback();
			}
		}
		obj.style.left=obj.offsetLeft+step+'px';
	},15)
}

bt.js

window.onload=function(){
var main=document.querySelector('.main');
var left=document.querySelector('.left');
var right=document.querySelector('.right');
var mainWidth=main.offsetWidth;
main.addEventListener('mouseenter',function(){
	left.style.display='block';
	right.style.display='block';
	clearInterval(timer);
	timer=null;
})
main.addEventListener('mouseleave',function(){
	left.style.display='none';
	right.style.display='none';
	timer=setInterval(function () {
        right.click();
    },2000);
})
	//小圆数量和图片的li数量是一致的，动态生成小圆点
var ul=document.querySelector('ul');
var ol=document.querySelector('.circle');
	for(var i=0;i<ul.children.length;i++){
		var li=document.createElement('li');
		ol.appendChild(li);
		li.setAttribute('index',i);
		li.addEventListener('click',function(){
			for(var j=0;j<ol.children.length;j++){
				ol.children[j].className='';
			}
			this.className='c';
			var index=this.getAttribute('index');			
			animate(ul,-index*mainWidth);
		})
	}
	    ol.children[0].className='c';
var imgLast=ul.children[0].cloneNode(true);
ul.appendChild(imgLast);	
var num=0;
right.addEventListener("click" , function(){
	if(num==ul.children.length-1)
  {
     ul.style.left=0;
     num=0;
  }
  num++;
  animate(ul, -num*mainWidth);
})

var circle=0;
right.addEventListener("click", function(){
  if(num==ul.children.length)
  {
      ul.style.left=0;
      num=0;
  }
  num++;
  animate(ul, -num*mainWidth);

 circle++;  //这里必须是先加加，再判断，再执行
 if(circle==ol.children.length)
  {
     circle=0;
  }
  for(var i=0;i<ol.children.length;i++)
  {
    ol.children[i].className="";
  }
  ol.children[circle].className="c";
})

 li.addEventListener("click",function(){
  for(var j=0; j<ol.children.length;j++)
  {
     ol.children[j].className="";
  }
  this.className="c";

  var index=this.getAttribute("index");
  num=index;
  circle=index;
  animate(ul, -index*mainWidth);
})
left.addEventListener("click", function(){
  if(num==0)
  {
       ul.style.left= -(ul.children.length-1)*mainWidth+"px";
       num=ul.children.length-1;
  }
  num--;
  animate(ul , -num*mainWidth);

 circle--;
 if(circle<0)
  {
     circle=ol.children.length-1;
  }
for(var i=0;i<ol.children.length ; i++)
 {
     ol.children[i].className="";
 }
ol.children[circle].className="c";
})
	//9自动播放轮播图
    var timer=setInterval(function () {
        right.click();
    },2000);
}