CSS：四种图片的轮播图

其他 2019-03-07 20:13:35 阅读次数: 0

一，使用left图片轮播图

效果：

其实四种效果都一样，只是变换效果不同而已，大家可根据名字区分，以下不在展示效果

zQuery.js文件

 function rgb_color(){//���rgbɫ��ɺ����ֵΪrgb��ɫ�ַ�
 var r=parseInt(Math.random()*255);
 var g=parseInt(Math.random()*255);
 var b=parseInt(Math.random()*255);
 var newcolor="rgb("+r+","+g+","+b+")";
 return newcolor;
 }
 function rgba_color(){//���rgbaɫ��ɺ����ֵΪrgba��ɫ�ַ�
 var r=parseInt(Math.random()*255);
 var g=parseInt(Math.random()*255);
 var b=parseInt(Math.random()*255);
 var a=Math.random();
 var newcolor="rgb("+r+","+g+","+b+","+a+")";
 return newcolor;
 }
  function getbyclass(parent,classname){//ͨ�������ȡԪ�غ������Ϊ��Ԫ�ء�������ֵΪԪ������
  var result=new Array();
  var allclass=parent.getElementsByTagName('*');
  for (var i=0; i<allclass.length;i++ )
  {

   if(classname==allclass[i].className)
	   result.push(allclass[i]);
  }
  return result;
  }
/**************************************************�˶����*****************************************************/
  function css(obj, attr, value)
{
	if(arguments.length==2)
	{
		if(attr=='opacity')
		{
			return Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));
		}
		else if (attr=='translate')//transform 2dת���е�translate
		{
			var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
			var matrixarray=transformstr.split(",");
			var re=[];
			re.push(parseInt(matrixarray[4]));re.push(parseInt(matrixarray[5]));
			return re;
		}else if (attr=='translateX')//transform 2dת���е�translateX
		{
			var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
			var matrixarray=transformstr.split(",");
			var re=(parseInt(matrixarray[4]));
			return re;
		}else if (attr=='translateY')//transform 2dת���е�translateY
		{
			var transformstr=obj.currentStyle?obj.currentStyle['transform']:document.defaultView.getComputedStyle(obj, false)['webkitTransform']||document.defaultView.getComputedStyle(obj, false)['msTransform']||document.defaultView.getComputedStyle(obj, false)['MozTransform']||document.defaultView.getComputedStyle(obj, false)['OTransform']||document.defaultView.getComputedStyle(obj, false)['transform']+"";
			var matrixarray=transformstr.split(",");
			var re=(parseInt(matrixarray[5]));
			return re;
		}
		else
		{
			return parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
		}
	}
	else if(arguments.length==3)
		switch(attr)
		{
			case 'width':
			case 'height':
			case 'paddingLeft':
			case 'paddingTop':
			case 'paddingRight':
			case 'paddingBottom':
				value=Math.max(value,0);
			case 'left':
			case 'top':
			case 'marginLeft':
			case 'marginTop':
			case 'marginRight':
			case 'marginBottom':
				obj.style[attr]=value+'px';
				break;
			case 'opacity':
				obj.style.filter="alpha(opacity:"+value+")";
				obj.style.opacity=value/100;
				break;
			case 'translate':
			obj.style.webkitTransform="translate(" + value[0] + "px,"+value[1]+"px)";
			obj.style.msTransform="translate(" + value[0] + "px,"+value[1]+"px)";
			obj.style.MozTransform="translate(" + value[0] + "px,"+value[1]+"px)";
			obj.style.OTransform="translate(" + value[0] + "px,"+value[1]+"px)";
			obj.style.transform="translate(" + value[0] + "px,"+value[1]+"px)";
			break;
			case 'translateX':obj.style.webkitTransform="translateX(" + value + "px)";
			obj.style.msTransform="translateX(" + value + "px)";
			obj.style.MozTransform="translateX(" + value + "px)";
			obj.style.OTransform="translateX(" + value + "px)";
			obj.style.transform="translateX(" + value + "px)";
			break;
			case 'translateY':obj.style.webkitTransform="translateY(" + value + "px)";
			obj.style.msTransform="translateY(" + value + "px)";
			obj.style.MozTransform="translateY(" + value + "px)";
			obj.style.OTransform="translateY(" + value + "px)";
			obj.style.transform="translateY(" + value + "px)";
			break;
			default:
				obj.style[attr]=value;
		}
	
	return function (attr_in, value_in){css(obj, attr_in, value_in)};
}


function stop(obj)
{
	clearInterval(obj.timer);
}

function move(obj, oTarget, iType, fnCallBack, fnDuring)
{
	var fnMove=null;
	if(obj.timer)
	{
		clearInterval(obj.timer);
	}
	switch(iType)
	{
		case "buffer":
			fnMove=do_buffer_move;
			break;
		case "flex":
			fnMove=do_flex_move;
			break;
		default: 
			fnMove=do_buffer_move;
			break;
	}
	
	obj.timer=setInterval(function (){
		fnMove(obj, oTarget, fnCallBack, fnDuring);
	}, 30);
}

function do_buffer_move(obj, oTarget, fnCallBack, fnDuring)
{
	var bStop=true;
	var attr='';
	var speed=0;
	var cur=0;
	
	for(attr in oTarget)
	{
		cur=css(obj, attr);
		if(oTarget[attr]!=cur)
		{
			bStop=false;
			if(attr=="translate")
			{//x����y��ͬʱ�仯ʱ
			if(!obj.oSpeed1)obj.oSpeed1={};//�¿�һ����¼y���ٶȵı���
			if(!obj.oSpeed1[attr])obj.oSpeed1[attr]=0;//�¿�һ����¼translate����y�ٶȵı���
			if(!obj.oSpeed)obj.oSpeed={};
		    if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
			cur=css(obj, attr);
			obj.oSpeed[attr]=(oTarget[attr][0]-cur[0])/5;
			obj.oSpeed[attr]=obj.oSpeed[attr]>0?Math.ceil(obj.oSpeed[attr]):Math.floor(obj.oSpeed[attr]);
			var value1=cur[0]+obj.oSpeed[attr];
			obj.oSpeed1[attr]=(oTarget[attr][1]-cur[1])/5;
			obj.oSpeed1[attr]=obj.oSpeed1[attr]>0?Math.ceil(obj.oSpeed1[attr]):Math.floor(obj.oSpeed1[attr]);
			var value2=cur[1]+obj.oSpeed1[attr];
			var value=[];
			value.push(value1);
			value.push(value2);
			css(obj,attr,value);
			}
			else{
			speed=(oTarget[attr]-cur)/5;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			
			css(obj, attr, cur+speed);
			}
		}
	}
	
	if(fnDuring)fnDuring.call(obj);
	
	if(bStop)
	{
		clearInterval(obj.timer);
		obj.timer=null;
		
		if(fnCallBack)fnCallBack.call(obj);
	}
}

function do_flex_move(obj, oTarget, fnCallBack, fnDuring)
{
	var bStop=true;
	var attr='';
	var speed=0;
	var cur=0;
	
	for(attr in oTarget)
	{
		if(!obj.oSpeed)obj.oSpeed={};
		if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
		
		bStop=false;
		if(attr=="translate"){//x����y��ͬʱ�仯ʱ
		if(!obj.oSpeed1)obj.oSpeed1={};//�¿�һ����¼y���ٶȵı���
		if(!obj.oSpeed1[attr])obj.oSpeed1[attr]=0;//�¿�һ����¼translate����y�ٶȵı���
        cur=css(obj, attr);
		obj.oSpeed[attr]+=(oTarget[attr][0]-cur[0])/5;
		obj.oSpeed[attr]*=0.7;
		var value1=cur[0]+obj.oSpeed[attr];
		obj.oSpeed1[attr]+=(oTarget[attr][1]-cur[1])/5;
		obj.oSpeed1[attr]*=0.7;
		var value2=cur[1]+obj.oSpeed1[attr];
		var value=[];
		value.push(value1);
		value.push(value2);
		css(obj,attr,value);
		}else{
		if(Math.abs(oTarget[attr]-cur)>=1 || Math.abs(obj.oSpeed[attr])>=1)
		{
			cur=css(obj, attr);
			obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
			obj.oSpeed[attr]*=0.7;
			
			css(obj, attr, cur+obj.oSpeed[attr]);
		}
		}
	}
	
	if(fnDuring)fnDuring.call(obj);
	
	if(bStop)
	{
		clearInterval(obj.timer);
		obj.timer=null;
		
		if(fnCallBack)fnCallBack.call(obj);
	}
}
/**************************************************�˶���ܽ���*****************************************************/
function index(current, obj){ //��ȡԪ������ֵ
for (var i = 0; i < obj.length; i++) { 
if (obj[i] == current) { 
return i; 
} 
} 
}

代码：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>使用left的图片轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#pics {
				width: 520px;
				height: 280px;
				border: 1px solid;
				overflow: hidden;
				position: absolute;
				top: 100px;
				left: 300px;
			}
			
			.pics {
				width: 2600px;
				height: 280px;
				position: relative;
				left: 0;
			}
			
			.pics>li {
				float: left;
			}
			
			.pics_pre {
				width: 32px;
				height: 32px;
				position: absolute;
				top: 45%;
				left: 0;
				background: url("img/arrow_left.png");
				cursor: pointer;
				display: none;
			}
			
			.pics_next {
				width: 32px;
				height: 32px;
				position: absolute;
				top: 45%;
				right: 0;
				background: url("img/arrow_right.png");
				cursor: pointer;
				display: none;
			}
			
			.pics_list {
				width: 100%;
				height: 8%;
				position: absolute;
				bottom: 0;
				background: #8B8878;
				opacity: 0.8;
				filter: alpha(opacity:80);
				cursor: pointer;
				text-align: center;
				display: none;
			}
			
			.pics_list>li {
				width: 10px;
				height: 10px;
				border-radius: 5px;
				background: #ffffff;
				cursor: pointer;
				float: left;
				margin: 5px;
				left: 35%;
				position: relative;
				list-style: none;
			}
		</style>
		<script type="text/javascript" src="js/zQuery.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var pics = document.getElementById('pics'); //获取外层div
				var pics_pre = getbyclass(pics, 'pics_pre')[0]; //获取上一个按钮
				var pics_next = getbyclass(pics, 'pics_next')[0]; //获取下一个按钮
				var pics_list = getbyclass(pics, 'pics_list')[0]; //获取圆点ul
				var pics_ul = pics.getElementsByTagName('ul')[0]; //获取图片ul
				var pics_lis = pics_ul.getElementsByTagName('li'); //获取图片li
				var inow = 0; //贯穿整体的当前图片索引变量
				for(var i = 0; i < pics_lis.length; i++) {
					var list = document.createElement('li');
					pics_list.appendChild(list); //为圆点ul添加所有的小圆点
				}
				var list_li = pics_list.getElementsByTagName('li'); //获取所有小圆点
				for(var i = 0; i < list_li.length; i++) {
					list_li[i].onclick = function() { //为每个小圆点加载点击事件
						inow = index(this, list_li); //获取当前圆点的索引值
						show(inow); //展示相应的图片
					}
				}
				show(0); //页面加载完成显示第一张
				var timer = setInterval(function() { //定时器自动播放
					if(inow < pics_lis.length - 1) {
						inow++; //页面加载完成后将从第二张开始，解决定时器等待的问题
					} else {
						inow = 0;
					}
					show(inow);
				}, 3000);
				pics_pre.onclick = function() { //上一个按钮被点击
					if(inow > 0) //更改索引变量的值
					{
						inow -= 1;
					} else {
						inow = pics_lis.length - 1;
					}
					show(inow); //展示
				}
				pics_next.onclick = function() { //下一个按钮被点击
					if(inow < pics_lis.length - 1) //更改索引变量的值
					{
						inow += 1;
					} else {
						inow = 0;
					}
					show(inow); //展示
				}

				function show(inow) { //展示函数
					var l = pics_lis[inow].offsetLeft; //获取到需要展示的图片的偏移量
					move(pics_ul, {
						left: -l
					}); //偏移量作为运动中left值
					for(var i = 0; i < pics_lis.length; i++) {
						list_li[i].style.background = '#FFFFFF'; //将所有小圆点的背景色变为白色
					}
					list_li[inow].style.background = '#EE7600'; //将当前小圆点的颜色改变
				}
				pics.onmouseover = function() { //鼠标悬停在图片上方
					pics_pre.style.display = "block"; //展示按钮与小圆点
					pics_next.style.display = "block";
					pics_list.style.display = 'block';
					clearInterval(timer); //暂停播放
				}
				pics.onmouseout = function() { //鼠标移开图片
					pics_pre.style.display = "none"; //将按钮与小圆点隐藏
					pics_next.style.display = "none";
					pics_list.style.display = "none";
					timer = setInterval(function() { //重开定时器，展示第inow张图片
						if(inow < pics_lis.length) {
							show(inow);
							inow++;
						} else {
							inow = 0;
						}
					}, 3000);
				}
			}
		</script>
	</head>

	<body>
		<div id="pics">
			<ul class="pics">
				<li>
					<a href=""><img src="img/1.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/2.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/3.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/4.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/5.jpg" alt="" /></a>
				</li>
			</ul>
			<span class="pics_pre"></span><span class="pics_next"></span>
			<ul class="pics_list">
			</ul>
		</div>
	</body>

</html>

二，使用opacity图片轮播图（类似于渐变变换）

代码：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>使用opacity的图片轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#pics {
				width: 520px;
				height: 280px;
				border: 1px solid;
				overflow: hidden;
				position: absolute;
				top: 100px;
				left: 300px;
			}
			
			.pics {
				width: 2600px;
				height: 280px;
				position: relative;
				left: 0;
			}
			
			.pics>li {
				position: absolute;
				opacity: 0;
				filter: alpha(opcity:0);
			}
			
			.pics_pre {
				width: 32px;
				height: 32px;
				position: absolute;
				top: 45%;
				left: 0;
				background: url("img/arrow_left.png");
				cursor: pointer;
				display: none;
			}
			
			.pics_next {
				width: 32px;
				height: 32px;
				position: absolute;
				top: 45%;
				right: 0;
				background: url("img/arrow_right.png");
				cursor: pointer;
				display: none;
			}
			
			.pics_list {
				width: 100%;
				height: 8%;
				position: absolute;
				bottom: 0;
				background: #8B8878;
				opacity: 0.8;
				filter: alpha(opacity:80);
				cursor: pointer;
				text-align: center;
				display: none;
			}
			
			.pics_list>li {
				width: 10px;
				height: 10px;
				border-radius: 5px;
				background: #ffffff;
				cursor: pointer;
				float: left;
				margin: 5px;
				left: 35%;
				position: relative;
				list-style: none;
			}
		</style>
		<script type="text/javascript" src="js/zQuery.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var pics = document.getElementById('pics');
				var pics_pre = getbyclass(pics, 'pics_pre')[0];
				var pics_next = getbyclass(pics, 'pics_next')[0];
				var pics_list = getbyclass(pics, 'pics_list')[0];
				var pics_ul = pics.getElementsByTagName('ul')[0];
				var pics_lis = pics_ul.getElementsByTagName('li');
				var inow = 0;
				for(var i = 0; i < pics_lis.length; i++) {
					var list = document.createElement('li');
					pics_list.appendChild(list);
				}
				var list_li = pics_list.getElementsByTagName('li');
				for(var i = 0; i < list_li.length; i++) {
					list_li[i].onclick = function() {
						inow = index(this, list_li);
						show(inow);
					}
				}
				show(0);
				var timer = setInterval(function() {
					if(inow < pics_lis.length - 1) {
						inow++;
					} else {
						inow = 0;
					}
					show(inow);
				}, 3000);
				pics_pre.onclick = function() { //上一个
					if(inow > 0) {
						inow -= 1;
					} else {
						inow = pics_lis.length - 1;
					}
					show(inow);
				}
				pics_next.onclick = function() { //下一个
					if(inow < pics_lis.length - 1) {
						inow += 1;
					} else {
						inow = 0;
					}
					show(inow);
				}

				function show(inow) {
					for(var i = 0; i < pics_lis.length; i++) {
						move(pics_lis[i], {
							opacity: 0
						});
						list_li[i].style.background = '#FFFFFF';
					}
					move(pics_lis[inow], {
						opacity: 100
					});
					list_li[inow].style.background = '#EE7600';
				}
				pics.onmouseover = function() {
					pics_pre.style.display = "block";
					pics_next.style.display = "block";
					pics_list.style.display = 'block';
					clearInterval(timer);
				}
				pics.onmouseout = function() {
					pics_pre.style.display = "none";
					pics_next.style.display = "none";
					pics_list.style.display = "none";
					timer = setInterval(function() {
						if(inow < pics_lis.length) {
							show(inow);
							inow++;
						} else {
							inow = 0;
						}
					}, 3000);
				}
			}
		</script>
	</head>

	<body>
		<div id="pics">
			<ul class="pics">
				<li>
					<a href=""><img src="img/1.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/2.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/3.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/4.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/5.jpg" alt="" /></a>
				</li>
			</ul>
			<span class="pics_pre"></span><span class="pics_next"></span>
			<ul class="pics_list">
			</ul>
		</div>
	</body>

</html>

三，使用top的图片轮播图（上下翻页类似于左右翻页）

代码：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>使用top的图片轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#pics {
				width: 520px;
				height: 280px;
				border: 1px solid;
				overflow: hidden;
				position: absolute;
				top: 100px;
				left: 300px;
			}
			
			.pics {
				position: relative;
				top: 0;
			}
			
			.pics>li {
				float: left;
				list-style: none
			}
			
			.pics_pre {
				width: 32px;
				height: 32px;
				position: absolute;
				top: 45%;
				left: 0;
				background: url("img/arrow_left.png");
				cursor: pointer;
				display: none;
			}
			
			.pics_next {
				width: 32px;
				height: 32px;
				position: absolute;
				top: 45%;
				right: 0;
				background: url("img/arrow_right.png");
				cursor: pointer;
				display: none;
			}
			
			.pics_list {
				width: 100%;
				height: 8%;
				position: absolute;
				bottom: 0;
				background: #8B8878;
				opacity: 0.8;
				filter: alpha(opacity:80);
				cursor: pointer;
				text-align: center;
				display: none;
			}
			
			.pics_list>li {
				width: 10px;
				height: 10px;
				border-radius: 5px;
				background: #ffffff;
				cursor: pointer;
				float: left;
				margin: 5px;
				left: 35%;
				position: relative;
				list-style: none;
			}
		</style>
		<script type="text/javascript" src="js/zQuery.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var pics = document.getElementById('pics');
				var pics_pre = getbyclass(pics, 'pics_pre')[0];
				var pics_next = getbyclass(pics, 'pics_next')[0];
				var pics_list = getbyclass(pics, 'pics_list')[0];
				var pics_ul = pics.getElementsByTagName('ul')[0];
				var pics_lis = pics_ul.getElementsByTagName('li');
				var inow = 0;
				for(var i = 0; i < pics_lis.length; i++) {
					var list = document.createElement('li');
					pics_list.appendChild(list);
				}
				var list_li = pics_list.getElementsByTagName('li');
				for(var i = 0; i < list_li.length; i++) {
					list_li[i].onclick = function() {
						inow = index(this, list_li);
						show(inow);
					}
				}
				show(0);
				var timer = setInterval(function() {
					if(inow < pics_lis.length - 1) {
						inow++;
					} else {
						inow = 0;
					}
					show(inow);
				}, 3000);
				pics_pre.onclick = function() { //上一个
					if(inow > 0) {
						inow -= 1;
					} else {
						inow = pics_lis.length - 1;
					}
					show(inow);
				}
				pics_next.onclick = function() { //下一个
					if(inow < pics_lis.length - 1) {
						inow += 1;
					} else {
						inow = 0;
					}
					show(inow);
				}

				function show(inow) {
					var l = pics_lis[inow].offsetTop;
					move(pics_ul, {
						top: -l
					});
					for(var i = 0; i < pics_lis.length; i++) {
						list_li[i].style.background = '#FFFFFF';
					}
					list_li[inow].style.background = '#EE7600';
				}
				pics.onmouseover = function() {
					pics_pre.style.display = "block";
					pics_next.style.display = "block";
					pics_list.style.display = 'block';
					clearInterval(timer);
				}
				pics.onmouseout = function() {
					pics_pre.style.display = "none";
					pics_next.style.display = "none";
					pics_list.style.display = "none";
					timer = setInterval(function() {
						if(inow < pics_lis.length) {
							show(inow);
							inow++;
						} else {
							inow = 0;
						}
					}, 3000);
				}
			}
		</script>
	</head>

	<body>
		<div id="pics">
			<ul class="pics">
				<li>
					<a href=""><img src="img/1.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/2.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/3.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/4.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/5.jpg" alt="" /></a>
				</li>
			</ul>
			<span class="pics_pre"></span><span class="pics_next"></span>
			<ul class="pics_list">
			</ul>
		</div>
	</body>

</html>

四，无缝切换轮播图（类似于一，但是比较生硬，无切换效果）

代码：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>无缝切换</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#pics {
				width: 520px;
				height: 280px;
				border: 1px solid;
				overflow: hidden;
				position: absolute;
				top: 100px;
				left: 300px;
			}
			
			.pics {
				width: 5200px;
				height: 280px;
				position: relative;
				left: 0;
			}
			
			.pics>li {
				float: left;
				list-style: none;
			}
			
			.pics_pre {
				width: 32px;
				height: 32px;
				position: absolute;
				top: 45%;
				left: 0;
				background: url("img/arrow_left.png");
				cursor: pointer;
				display: none;
			}
			
			.pics_next {
				width: 32px;
				height: 32px;
				position: absolute;
				top: 45%;
				right: 0;
				background: url("img/arrow_right.png");
				cursor: pointer;
				display: none;
			}
			
			.pics_list {
				width: 100%;
				height: 8%;
				position: absolute;
				bottom: 0;
				background: #8B8878;
				opacity: 0.8;
				filter: alpha(opacity:80);
				cursor: pointer;
				text-align: center;
				display: none;
			}
			
			.pics_list>li {
				width: 10px;
				height: 10px;
				border-radius: 5px;
				background: #ffffff;
				cursor: pointer;
				float: left;
				margin: 5px;
				left: 35%;
				position: relative;
				list-style: none;
			}
		</style>
		<script type="text/javascript" src="js/zQuery.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var pics = document.getElementById('pics'); //获取外层div
				var pics_pre = getbyclass(pics, 'pics_pre')[0]; //获取上一个按钮
				var pics_next = getbyclass(pics, 'pics_next')[0]; //获取下一个按钮
				var pics_list = getbyclass(pics, 'pics_list')[0]; //获取圆点ul
				var pics_ul = pics.getElementsByTagName('ul')[0]; //获取图片ul
				var pics_lis = pics_ul.getElementsByTagName('li'); //获取图片li
				var n = pics_lis.length; //图片数量
				var inow = 0; //当前图片索引变量
				var btn = true; //开关，解决连续点击来不及删除元素的问题
				for(var i = 0; i < pics_lis.length; i++) {
					var list = document.createElement('li');
					pics_list.appendChild(list); //为圆点ul添加所有的小圆点
				}
				var list_li = pics_list.getElementsByTagName('li'); //获取所有小圆点
				for(var i = 0; i < list_li.length; i++) {
					list_li[i].onclick = function() { //为每个小圆点加载点击事件
						inow = index(this, list_li); //获取当前圆点的索引值
						show(inow); //展示相应的图片
					}
				}
				show(0); //页面加载完成显示第一张
				var timer = setInterval(function() { //定时器自动播放
					if(inow < n - 1) {
						inow++; //页面加载完成后将从第二张开始，解决定时器等待的问题
					} else {
						inow = 0;
					}
					show_next(); //展示下一张
				}, 3000);
				pics_pre.onclick = function() { //上一个按钮被点击
					show_pre(); //展示上一张
				}
				pics_next.onclick = function() { //下一个按钮被点击
					show_next(); //展示下一张
				}

				function show_pre() { //展示上一张函数
					if(btn) {
						btn = false; //将开关关闭，直到下次打开之前点击按钮将无效
						var newli = pics_lis[n - 1].cloneNode(true); //复制最后一张
						pics_ul.insertBefore(newli, pics_lis[0]); //添加到第一张之前成为第一张
						pics_ul.style.left = -pics_lis[1].offsetLeft + 'px'; //拉倒第二张的位置
						move(pics_ul, {
							left: 0
						}, 'buffer', function() { //从第二张图切换到第一张图
							pics_ul.removeChild(pics_lis[n]); //移除最后一张图
							btn = true; //删除完毕后打开开关
						});
						if(inow > 0) { //更改索引值
							inow--;
						} else {
							inow = 4;
						}
						for(var i = 0; i < n; i++) {
							list_li[i].style.background = '#FFFFFF'; //将所有小圆点的背景色变为白色
						}
						list_li[inow].style.background = '#EE7600'; //将对应小圆点的颜色改变
					}
				}

				function show_next() {
					if(btn) {
						btn = false; //将开关关闭，直到下次打开之前点击按钮将无效
						var newli = pics_lis[0].cloneNode(true); //复制第一张
						pics_ul.appendChild(newli); //添加到ul最后
						var l = pics_lis[1].offsetWidth;
						move(pics_ul, {
							left: -l
						}, 'buffer', function() { //切换至第二张图
							pics_ul.removeChild(pics_lis[0]); //移除第一张图
							pics_ul.style.left = 0; //重设left为0
							btn = true; //打开开关
						});
						if(inow < n - 1) { //更改索引值
							inow++;
						} else {
							inow = 0;
						}
						for(var i = 0; i < n; i++) {
							list_li[i].style.background = '#FFFFFF'; //将所有小圆点的背景色变为白色
						}
						list_li[inow].style.background = '#EE7600'; //将对应小圆点的颜色改变
					}
				}

				function show(inow) { //展示函数
					var l = pics_lis[inow].offsetLeft; //获取到需要展示的图片的偏移量

					for(var i = 0; i < n; i++) {
						list_li[i].style.background = '#FFFFFF'; //将所有小圆点的背景色变为白色
					}
					list_li[inow].style.background = '#EE7600'; //将当前小圆点的颜色改变
					move(pics_ul, {
						left: -l
					}, 'buffer'); //偏移量作为运动中left值
				}
				pics.onmouseover = function() { //鼠标悬停在图片上方
					pics_pre.style.display = "block"; //展示按钮与小圆点
					pics_next.style.display = "block";
					pics_list.style.display = 'block';
					clearInterval(timer); //暂停播放
				}
				pics.onmouseout = function() { //鼠标移开图片
					pics_pre.style.display = "none"; //将按钮与小圆点隐藏
					pics_next.style.display = "none";
					pics_list.style.display = "none";
					timer = setInterval(function() { //重开定时器，展示第inow张图片
						if(inow < pics_lis.length) {
							show_next();
							inow++;
						} else {
							inow = 0;
						}
					}, 3000);
				}
			}
		</script>
	</head>

	<body>
		<div id="pics">
			<ul class="pics">
				<li>
					<a href=""><img src="img/1.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/2.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/3.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/4.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="img/5.jpg" alt="" /></a>
				</li>
			</ul>
			<span class="pics_pre"></span><span class="pics_next"></span>
			<ul class="pics_list">
			</ul>
		</div>
	</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_42192693/article/details/88082317
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022