一,使用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>