轮播图
来源：互联网 发布：mmd绅士动作数据 编辑：程序博客网 时间：2024/05/18 16:54
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>轮播图</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#wrap{
width:350px;
height:200px;
margin:100pxauto;
border:3pxsolid red;
position:relative;
overflow:hidden;
}
#contentDiv{
/*width: 2100px;*/
height:200px;
position:absolute;
top:0;
left:0;
}
#contentDivimg{
width:350px;
height:200px;
float:left;
}
ul{
list-style:none;
position:absolute;
margin:0auto;
left:30%;
bottom:0;
}
li{
width:20px;
height:20px;
border-radius:50%;
background:white;
text-align: center;
line-height:20px;
float:left;
margin:0auto;
}
a{
color:black;
text-decoration:none;
}
#left,#right{
width:30px;
height:30px;
position:absolute;
top:50%;
background: black;
opacity:0.3;
color:white;
text-align: center;
line-height:30px;
}
#right{
right:0px;
}
.lis{
background: red;
}
</style>
</head>
<body>
<divid="wrap">
<divid="contentDiv">
<imgsrc="img/01.jpg" alt="" />
<imgsrc="img/02.jpg" alt="" />
<imgsrc="img/03.jpg" alt="" />
<imgsrc="img/04.jpg" alt="" />
<imgsrc="img/05.jpg" alt="" />
<imgsrc="img/06.jpg" alt="" />
<imgsrc="img/01.jpg" alt="" />
</div>
<!--图案上小点-->
<ul>
<liclass="lis"><ahref="###">1</a></li>
<li><ahref="###">2</a></li>
<li><ahref="###">3</a></li>
<li><ahref="###">4</a></li>
<li><ahref="###">5</a></li>
<li><ahref="###">6</a></li>
</ul>
<div id="left"><</div>
<div id="right">></div>
</div>
<scriptsrc="JS/tween.js" type="text/javascript"></script>
<scripttype="text/javascript">
//内容div
varcontentDiv = document.getElementById("contentDiv");
// contentDiv.innerHTML += contentDiv.innerHTML;
//图片数组
varimgs = document.getElementsByTagName("img");
contentDiv.style.width= imgs[0].offsetWidth * imgs.length + "px";
//小球
varlis = document.getElementsByTagName("li");
//左按钮
varleftbtn = document.getElementById("left");
//右按钮
varrightbtn = document.getElementById("right");
/*
把换小球和换图片分别封装成两个函数
点击按钮时调用换小球与换图片的函数
当鼠标移入小球时调用换图片函数
当鼠标不在可视区域时,使用定时器调用换小球函数与换图片函数
当鼠标移入可视区域时,清除定时器
*/
//声明一个变量记录当前是第几张图片
varindex = 0;
//左边按钮点击事件
leftbtn.onclick= function(){
if(index== 0){
index= 6;
contentDiv.style.left= -imgs[0].offsetWidth * index + "px";
}
index--;
//换图片
scrollImg();
//换小球
changePoint();
}
//右边按钮点击事件
rightbtn.onclick= function(){
if(index== 6){
index= 0;
contentDiv.style.left= imgs[0].offsetWidth * index + "px";
}
index++;
scrollImg();
changePoint();
}
//换图片函数
functionscrollImg(){
vart = 0;
//offsetLeft 获取对应元素距离父级最左端的位置
varb = contentDiv.offsetLeft;
varc = index * -imgs[0].offsetWidth- b;
vard = 20;
functionmove(){
t++;
contentDiv.style.left= Tween.Linear(t, b, c, d) + "px";
if(t== d){
clearInterval(timer);
}
}
vartimer = setInterval(move, 20);
}
//换小球函数
functionchangePoint(){
for(vari = 0; i < lis.length; i++){
if(index== i){
lis[i].style.background= "red";
}
else{
lis[i].style.background= "white";
}
}
if(index== 6){
lis[0].style.background= "red";
}
}
//为每一个小球绑定鼠标移入事件
for(vari = 0; i < lis.length; i++){
lis[i].onmouseenter= (function(nowIndex){
returnfunction(){
index= nowIndex;
scrollImg();
changePoint();
}
})(i);
}
functionautoScrollImg(){
if(index== 6){
index= 0;
contentDiv.style.left= imgs[0].offsetWidth * index + "px";
}
index++;
scrollImg();
changePoint();
}
var timer2 = setInterval(autoScrollImg, 1000);
var wrap = document.getElementById("wrap");
wrap.onmouseenter= function(){
clearInterval(timer2);
}
wrap.onmouseleave= function(){
timer2 = setInterval(autoScrollImg, 1000);
}
</script>
</body>
</html>
