带详情图片轮播

HTML

<div id="box">
	<div id="pic"></div>
	<p></p>
</div>

CSS

*{
	margin: 0;
	padding: 0;
}
#box{
	width: 500px;
	height: 300px;
	position: relative;
	overflow: hidden;
	margin: 20px auto 0;
}
#pic{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
}
#pic img{
	height: 100%;
	border: 0;
}
p{
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0px;
	height: 80px;
	background: rgba(0,0,0,.5);
	color: #fff;
	text-align: center;
	line-height: 80px;
}

JS

var imgArray=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511167162133&di=fe27f741ca0c915199d4576a8ffac946&imgtype=0&src=http%3A%2F%2Fwww.ywga.gov.cn%2Fjwgk%2Fsyzc%2F201703%2FW020170331331041430290.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511166484577&di=f000cde0483941d947a1628cc91b1c49&imgtype=0&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201706%2F05%2F962ba7f592396f12cab97a9490031671.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511167245165&di=b67c232671c9018f44c7bd2c158dc0a5&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1703%2F1017-1F302110K6.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511167262450&di=defa4f8b1f2cf03229473b93bd0b4713&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Flarge%2Fd75e3906jw1eiwxjge3zxj20t50iggqq.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511167297748&di=5303510e2607fd41f607236ce043e475&imgtype=0&src=http%3A%2F%2Fimg2.zol.com.cn%2Fproduct%2F104%2F642%2FceqOwlYvIkPSk.jpg",
			"https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1511157232&di=1c3c867d3eb753a7a098304afc0ed891&src=http://rescdn.qqmail.com/dyimg/20140807/74DA11875739.jpg"
];
var txtArray=["图片1","图片2","图片3","图片4","图片5","图片6"];
var oBox=document.getElementById("box");
var picBox=document.getElementById("pic");
var oTxt=document.getElementsByTagName("p")[0];
var len=imgArray.length;
var num=0;
var w=parseInt(getStyle(oBox,"width"));
//页面初始化
//生成图片
picBox.style.width=w*len+"px";
for (var i=0;i<len;i++) {
	picBox.innerHTML+="<img style='width:"+w+"px;' src='"+imgArray[i]+"'/>";
}
//文字
oTxt.innerHTML=txtArray[0];

//图片自动播放
/*
 思路：1.默认情况下显示图片一和图片一的文字介绍，停留2s后图片一的文字介绍隐藏掉；
 	 2.图片一的文字介绍隐藏后，图片二显示，图片一隐藏
 	 3.图片二显示后图片二的文字介绍慢慢显示出来，停留2s再隐藏掉，这样一直执行到最后一张图片
 * */
//停留2S再使图片1的文字介绍隐藏掉
setTimeout(fn,2000);
function fn(){
	//图片一文字隐藏
	doMove(oTxt,5,-80,"bottom",function(){
		num++;
		num%=len;
		
		//图片二显示
		doMove(picBox,10,-num*w,"left",function(){
			//修改文字内容并显示出来
			oTxt.innerHTML=txtArray[num];
			doMove(oTxt,5,0,"bottom",function(){
				//停留2s循环执行函数，文字隐藏，图片显示
				setTimeout(fn,2000);
			});
		});
	})
}


function doMove(obj,dir,target,attr,endFn){
	dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
				
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var speed=parseInt(getStyle(obj,attr))+dir;//步长
					
		if(speed<target&&dir<0||speed>target&&dir>0){//往后跑
			speed=target;
		}
					
		obj.style[attr]=speed+"px";
					
		if(speed==target){
			clearInterval(obj.timer);
						
//			if(endFn){
//				endFn();
//			}
			endFn&&endFn();
		}
	},30)
}

//获取元素样式函数
function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,false)[attr];
	}
}

　　

转载于:https://www.cnblogs.com/yangxue72/p/7867037.html