<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
width: 350px;
height: 200px;
margin:100px auto;
border:3px solid red;
position: relative;
overflow:hidden;
}
#contentDiv {
/*width: 2100px;*/
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#contentDiv img{
width: 350px;
height: 200px;
float:left;
}
ul {
list-style: none;
position: absolute;
margin:0 auto;
left: 30%;
bottom: 0;
}
li {
width: 20px;
height: 20px;
border-radius:50%;
background:white;
text-align: center;
line-height: 20px;
float:left;
margin:0 auto;
}
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>
<div id="wrap">
<div id="contentDiv">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
<img src="img/05.jpg" alt="" />
<img src="img/06.jpg" alt="" />
<img src="img/01.jpg" alt="" />
</div>
<!--图案上小点-->
<ul>
<li class="lis"><a href="###">1</a></li>
<li><a href="###">2</a></li>
<li><a href="###">3</a></li>
<li><a href="###">4</a></li>
<li><a href="###">5</a></li>
<li><a href="###">6</a></li>
</ul>
<div id="left"><</div>
<div id="right">></div>
</div>
<script src="JS/tween.js" type="text/javascript"></script>
<script type="text/javascript">
//内容div
var contentDiv = document.getElementById("contentDiv");
// contentDiv.innerHTML += contentDiv.innerHTML;
//图片数组
var imgs = document.getElementsByTagName("img");
contentDiv.style.width = imgs[0].offsetWidth * imgs.length + "px";
//小球
var lis = document.getElementsByTagName("li");
//左按钮
var leftbtn = document.getElementById("left");
//右按钮
var rightbtn = document.getElementById("right");
/*
把换小球和换图片分别封装成两个函数
点击按钮时调用换小球与换图片的函数
当鼠标移入小球时调用换图片函数
当鼠标不在可视区域时,使用定时器调用换小球函数与换图片函数
当鼠标移入可视区域时,清除定时器
*/
//声明一个变量记录当前是第几张图片
var index = 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();
}
//换图片函数
function scrollImg(){
var t = 0;
//offsetLeft 获取对应元素距离父级最左端的位置
var b = contentDiv.offsetLeft;
var c = index * -imgs[0].offsetWidth - b;
var d = 20;
function move(){
t++;
contentDiv.style.left = Tween.Linear(t, b, c, d) + "px";
if(t == d){
clearInterval(timer);
}
}
var timer = setInterval(move, 20);
}
//换小球函数
function changePoint(){
for(var i = 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(var i = 0; i < lis.length; i++){
lis[i].onmouseenter = (function(nowIndex){
return function(){
index = nowIndex;
scrollImg();
changePoint();
}
})(i);
}
function autoScrollImg(){
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>