<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>轮播图</title>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.body{
/*第二种居中方式*/
/*text-align: center;*/
}
#outor{
height: 420px;
width: 520px;
/*居中*/
margin: 50px auto;
background-color: skyblue;
/*设置上下宽度*/
padding: 10px 0;
/*display: inline-block;*/
/*开启相对定位*/
position: relative;
/*裁剪溢出部分*/
overflow: hidden;
}
/*设置ul样式*/
#imgList{
/*删除项目符号*/
list-style: none;
/*设置ul宽度*/
/*width: 2000px;*/
/*开启绝对定位*/
position: absolute;
/*开启绝对定位之后最好给父元素开启相对定位*/
/*设置偏移量 切换图片*/
/*left: -1040px;*/
}
/*设置图片中li样式*/
#imgList li{
/*设置浮动*/
float: left;
/*设置左右边距*/
margin: 0 10px;
}
/*设置img保持比例缩放*/
img{
width: 500px;
height: 400px;
object-fit: contain;
}
/*导航条*/
#navDiv{
/*开启绝对定位*/
position: absolute;
/*设置上下 位置*/
bottom: 10px;
}
#navDiv a{
/*设置超链接浮动*/
/*这样内敛样式变成块级元素 浮动使元素横着排列*/
float: left;
/*设置超链接宽高*/
width: 15px;
height: 15px;
/*设置背景颜色*/
background-color: red;
/*设置左右外边距*/
margin: 0 5px;
/*设置透明*/
opacity: 0.5;
/*兼容ie8的透明*/
filter: alpha(opacity=50);
}
/*设置鼠标移入效果*/
#navDiv a:hover{
background-color: black;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取imgList
var imgList=document.getElementById('imgList');
// 获取所有的图片
var imgArr=document.getElementsByTagName("img");
//获取imgList的宽度
var imgListWidth=0;
for(var i=0;i<imgArr.length;i++){
//alert(imgList.style.width);
imgListWidth+=parseInt(imgArr[i].width);
//console.log(imgArr[i].width);
//imgList.style.width=imgList.style.width+parseInt(imgArr[i].width);
//alert(imgArr[i].width);
//现在还不知道怎样获取具体照片的大小
//navDiv.style.bottom=
}
imgList.style.width=imgListWidth+20*i+"px";
//alert(i);
//alert(imgListWidth);
//设置导航条居中
var navDiv=document.getElementById("navDiv");
var outor=document.getElementById("outor");
//设置navDiv的left值
//offsetWidth 返回元素宽度
//alert(outor.offsetWidth);
navDiv.style.left=(outor.offsetWidth-navDiv.offsetWidth)/2+"px";
//获取所有的a
var a=document.getElementsByTagName("a");
//显示的图片索引
var index=0;
//默认选中第一张图片
a[index].style.backgroundColor="black";
/*
点击超链接显示对应图片
*/
for(var i=0;i<a.length;i++){
//记录每个超链接的序号
a[i].num=i;
a[i].onclick=function(){
//解决点击和自动播放的冲突
clearInterval(timer_autoChange);
//获取点击超链接的索引,并将其设置为index
index=this.num;
//alert("导航条"+index);
//切换图片
//alert(outor.offsetWidth);
//imgList.style.left=parseInt(outor.offsetWidth)*(-index)+"px";
//imgList.style.left=-520*index+"px";
//选中的超链接变成黑色
//初始化
a[index].style.backgroundColor="black";
//设置颜色
setAColor(index);
//测试导航条和移动图片差一的问题
//console.log("index="+index);
//console.log("目标位置="+parseInt(outor.offsetWidth)*(-index));
//这里不一样时因为用setAColor初始化导航条颜色时多加了一个一
//修改index的值便可以
index--;
//使用move函数来切换图片
move(imgList,"left",parseInt(outor.offsetWidth)*(-index),200,autoChange);
//在执行完成后开启自动播放
};
}
index=0;
autoChange();
//定义自动切换定时器标识
var timer_autoChange;
//自动切换图片
function autoChange(){
//index=0;
//alert();
//开启一个定时器取切换图片
timer_autoChange=setInterval(function(){
//console.log("第"+index);
//使用move函数来切换图片
move(imgList,"left",parseInt(outor.offsetWidth)*(-index),20,setAColor);
//这里传的回调函数不带括号不然会先执行回调函数在执行move函数造成离谱的问题
//再有定时器的函数上使用alert就会出现时间上的混乱
//应为弹出提示框需要事件 这和定时器函数间的时间间隔有过于明显的时间差问题
//alert(index);
},3000);
}
//创建一个方法设置a的颜色
function setAColor(){
//便利所有的a，并将他们的颜色设置成红色
for(var i=0;i<a.length;i++){
//如果设置颜色 就时内联样式 就会覆盖hovor的效果
//但是如果设置成为空串 就相当于取消了刚刚设定的灰色内联样式
//就会显示我们样式表中的样式
a[i].style.backgroundColor="";
}
//将选中的a设置为灰色
if(index==imgArr.length-1){
//alert("jiehuan"+index);
index=0;
//修改imglist到第一张
imgList.style.left=0+"px";
}
a[index].style.backgroundColor="black";
//console.log("回调函数结束"+(index));
index++;
}
//元素位置移动函数
function move(obj,attr,target,speed,callback){
/*
参数：
obj 执行动画的对象
attr 要执行动画的样式 left top width height
target 动画的目标位置
speed 执行动画的速度
callback 在动画执行完毕之后调用回调函数
*/
//关闭上一个定时器
clearInterval(obj.timer);
//获取obj的原来的left值
//var oldValue=getStyle(obj,attr);
//ie有时候会返回auto 这样可以指定值就不会出现这样的情况
// console.log("oldValue="+parseInt(oldValue));
// console.log("target="+target);
//开启一个定时器，用来执行动画效果
obj.timer=setInterval(function(){
//获取obj的原来的left值
var oldValue=getStyle(obj,attr);
//ie有时候会返回auto 这样可以指定值就不会出现这样的情况
//处理目标位置就是原来位置的情况
if(parseInt(oldValue)==target){
//当移动到target 位置时就关闭定时器
clearInterval(obj.timer);
//回调函数
callback&&callback();
return;
}
//比较当前位置和目标位置 来确定移动方向
if(parseInt(oldValue)>target){
speed=-Math.abs(speed);
}
//console.log("speed="+speed);
//在旧值的基础上按照speed移动
var newValue=parseInt(oldValue)+speed;
//解决超过target 没停问题
//向左移时 需要判断newValue是否小于target
//向右移时 需要判断newValue是否大于target
// console.log("newValue="+newValue)
// console.log("=========================")
if((speed<0&&newValue<target)||(speed>0&&newValue>target)){
newValue=target;
}
//设置obj的位置
obj.style[attr]=newValue+"px";
if(newValue==target){
//alert(newValue==target);
//当移动到target 位置时就关闭定时器
clearInterval(obj.timer);
//回调函数
callback&&callback();
}
},30)
}
/*获取元素样式*/
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
};
</script>
<body>
<div id="outor">
<ul id="imgList">
<li><img src="img-lly/1.jpeg"></li>
<li><img src="img-lly/2.jpeg"></li>
<li><img src="img-lly/3.jpeg"></li>
<li><img src="img-lly/4.jpeg"></li>
<li><img src="img-lly/5.jpeg"></li>
<li><img src="img-lly/6.jpeg"></li>
<li><img src="img-lly/7.jpeg"></li>
<li><img src="img-lly/1.jpeg"></li>
</ul>
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
