<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul{list-style: none}
.banner{width: 800px;height: 400px;margin:100px auto;position: relative;overflow: hidden;}
.banner .imgs{position: absolute;top: 0;left: 0;right: 0;width:4800px;height: 400px;}
.banner .imgs li{width: 800px;height: 400px;float: left;}
.banner .btn{display: none;}
.banner .left{position: absolute;top:50%;margin-top:-100px;width: 60px;height: 200px;text-align: center;font-size: 50px;line-height:200px;color: white;background-color: rgba(0,0,0,0.5);left: 0;}
.banner .right{position: absolute;top:50%;margin-top:-100px;width: 60px;height: 200px;text-align: center;font-size: 50px;line-height: 200px;color: white;background-color: rgba(0,0,0,0.5);right: 0;}
.banner .dots{position: absolute;bottom:0;left:50%;width: 300px;height: 50px;margin-left:-150px;}
.banner .dots>li{float: left;width: 20px;height: 20px;border: 1px solid black;border-radius: 50%;background-color:rgba(0,255,255,0.2);margin:15px 19px;}
.banner .dots li.dot1{background-color: #fff};
</style>
</head>
<body>
<div class="banner">
<ul class="imgs">
<li ><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540263603&di=7d37b77c1ca9b3303b1491fd6e26fa0a&src=http://07imgmini.eastday.com/mobile/20181012/20181012170119_12232c1e8905209995a2b1b31cdb7efd_1.jpeg" width="800" height="400"></li>
<li ><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540273782501&di=8cf5d004f0514633517976270813e3d1&imgtype=0&src=http%3A%2F%2Fimg.soufun.com%2Fnews%2F2010_07%2F21%2Foffice%2F1279693191264_000.jpg" width="800" height="400"></li>
<li ><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4041003257,4045257222&fm=11&gp=0.jpg" width="800" height="400"></li>
<li ><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540273877003&di=9ae2004b84bdc981eaec173081a00813&imgtype=0&src=http%3A%2F%2F05imgmini.eastday.com%2Fmobile%2F20180927%2F20180927182618_804670f86fbdabecc50e7577e5938bdd_9.jpeg" width="800" height="400"></li>
<li ><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540273900777&di=fef12122df8372f6f2e40a2e84361f11&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20170405%2F20170405185954_a39c45d1455d92c27fc0a7cb406cae1e_4.jpeg" width="800" height="400"></li>
</ul>
<ul class="btn">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="dots">
<li class="dot1" index="0"></li>
<li index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
</ul>
</div>
<script src="public.js"></script>
<script>
var banner = document.querySelector(".banner");
var imgs = document.querySelector(".imgs");
var w = imgs.children[0].clientWidth ; //当前banner的宽度
var i=0,j,len = imgs.children.length; //当前图片的索引
var btn = document.querySelector(".btn");
var dots = document.querySelector(".dots");
var auto = true;
var flag = true;
console.log(len);
var timerId;
imgs.appendChild(imgs.children[0].cloneNode(true));
function move(){
if(i==len+1){//len为图片的宽度5 拷贝一个就要加1就是6
imgs.style.left = 0;//移动到第六张,然后让其返回0
i=1;//当宽度为0的时候，把1的值赋给i;就是第二张,因为最后一张是拷贝的第一张
}
if(i==-1){//移动到第一张时,跳到倒数第二张,就是最后一张
imgs.style.left = -len*w+"px";//就是没有拷贝的原来几张图片的长度
i=len-1;//就是把他的索引给i,因为开始是0,故减1
}
//改变小点
for(var k=0;k<len;k++){
dots.children[k].className="";
}
j=i;
if(j==len){
j=0;
}
dots.children[j].className="dot1";
animation(imgs,"left",-i*w,400,function(){
clearTimeout(timerId);
if(auto){
timerId = setTimeout("move(i++)",2000);
}
flag = true;
});
}
timerId = setTimeout("move(i++)",2000);
//图片移出启动定时器
imgs.onmouseout = function(){
auto = true;
timerId = setTimeout("move(i++)",2000);//启动定时器
}
//图片移入,清理定时器
imgs.onmouseover = function(){
auto = false;
clearTimeout(timerId);//清理定时器
}
//鼠标移入大盒子让左右导航显示
banner.onmouseover = function(){
btn.style.display = "block";
}
//鼠标移出大盒子让左右导航隐藏
banner.onmouseout = function(){
btn.style.display = "none";
}
//左导航点击让图片向左移动
var left = btn.children[0];
left.onclick = function(){
if(flag){
flag = false;
clearTimeout(timerId);
timerId = setTimeout("move(i--)",0);
}
}
//右导航点击让图片向右移动
var right = btn.children[1];
right.onclick = function(){
if(flag){
flag=false;
clearTimeout(timerId);
timerId = setTimeout("move(i++)",0);
}
}
//点击下方按钮来移动图片到相应的位置
dots.onclick = function(eve){
eve = eve || window.event;
var target = eve.target || eve.srcElement;
if(target.tagName =="LI"){
var index = target.getAttribute("index");
console.log(index)
i=index;//把他的自定义参数传给i
clearTimeout(timerId);
timerId = setTimeout(move,0);
}
}
/*封装的动画函数
// 执行动画函数
function animation(ele,attr,end,time,cb){
var style = getStyle(ele,attr); //"8.33px"
var start = parseFloat(style); //当前元素当前属性的当前状态值
var step = (end-start)/(time/(1000/60)); //每次变化的量
var dw = style.replace(start,""); //得到单位
function move(){
//每次变化
start+= step;
ele.style[attr] = start+dw;
// 当step大于0的时候，说明一直进行++操作
// 当step小于0的时候，说明一直进行--操作
if(step>0?start>=end:start<=end){
ele.style[attr] = end+dw; //纠正超界的情况
clearInterval(timer);
if(cb){
cb();
}
}
}
var timer = setInterval(move,1000/60);
return timer;
}
*/
</script>
</body>
</html>
扫一扫
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
