CSS 部分代码
<style type="text/css">
ul{
padding:0;
margin:0;
list-style:none;
}
img{
vertical-align:top;
}
.slider{
width:490px;
height:170px;
margin:100px auto;
border:1px solid red;
padding:5px;
position:relative;
}
.box{
width:100%;
height:100%;
position:relative;
overflow:hidden;
}
.box ul{
width:900%;
height:100%;
position:absolute;
left:-490px;
top:0;
}
.box ul li{
float:left;
}
.slider .circles{
position:absolute;
left:50%;
margin-left:-70px;
bottom:10px;
}
.slider .circles ul li{
width:18px;
height:18px;
background:#ff6600;
text-align:center;
line-height:18px;
float:left;
margin-right:10px;
cursor:pointer;
}
.oldColor{
background:#ff6600!important;
}
.newColor{
background:#ff0000!important;
}
.slider a{
text-decoration:none;
font-size:20px;
height:30px;
width:30px;
position:absolute;
top:50%;
margin-top:-15px;
background:rgba(0,0,0,0.3);
line-height:30px;
text-align:center;
color:#eee;
}
.slider a:hover{
background:rgba(0,0,0,0.7);
}
.slider .next{
right:5px;
}
.slider .prev{
left:5px;
}
HTML部分
<body>
<div class="slider">
<div class="box">
<ul>
<li><img src="images/05.jpg" alt="" /></li>
<li><img src="images/01.jpg" alt="" /></li>
<li><img src="images/02.jpg" alt="" /></li>
<li><img src="images/03.jpg" alt="" /></li>
<li><img src="images/04.jpg" alt="" /></li>
<li><img src="images/05.jpg" alt="" /></li>
<li><img src="images/01.jpg" alt="" /></li>
</ul>
</div>
<div class="circles">
<ul>
<li class="newColor">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
JS部分
/*
@1 图片移动时间
@2 图片大小
@3 节点对象{
属性名不能改! 属性值可以改！
"circles":".circles ul li", //所有小圆点
"slider":".slider", //轮播图盒子
"imgBox":".box ul", //包含所有图片的盒子
"prev":".prev", //左切换按钮
"next":".next" //右切换按钮
}
*/
function slider(imgMoveTime,imgWidth,objDom)
{
function $$(name){
return document.querySelectorAll(name);
}
function $(name){
return document.querySelector(name);
}
function getCss(ele,style){
return window.getComputedStyle?getComputedStyle(ele)[style]:obj.CurrentStyle(style);
}
/*
Dom节点
*/
var circles=$$(objDom["circles"]); //所有小圆点
var slider=$(objDom["slider"]); //轮播图盒子
var imgBox=$(objDom["imgBox"]); //包含所有图片的盒子
var prev=$(objDom["prev"]); //左切换按钮
var next=$(objDom["next"]); //右切换按钮
var sign=true; //一张切换好了才能再切换 sign作为标记是否切换完毕
var len=circles.length;
var circleLen=circles.length;
var boundLeft=imgWidth*-1*(circleLen+1);//轮播图满足左边界的值在移动后瞬间变到指定位置
/*时间运动函数*/
function offset(distance)
{
var S=distance;
var T=imgMoveTime;
var oldT=new Date().getTime();
var s=0;
var t=0;
var newT=0;
var timer=null;
clearInterval(timer);
var position=imgBox.offsetLeft;
timer=setInterval(function(){
newT=new Date().getTime();
t=newT-oldT;
s=S*t/T;
if(t/T>=1){
imgBox.style.left=position+S+"px";
/*
实现无限循环
当满足条件瞬间变到指定位置
欺骗性
*/
if(imgBox.offsetLeft<=boundLeft){
imgBox.style.left=imgWidth*-1+"px";
}
else if(imgBox.offsetLeft>=0){
imgBox.style.left=imgWidth*-1*circleLen+"px";
}
/*
标记属性 上一张图片切换好了 才能开始开始下一次切换
*/
sign=true;
clearInterval(timer);
}
else{
sign=false;
imgBox.style.left=position+s+"px";
}
},1000/60);
}
function moveL(){
if(sign){
offset(imgWidth);
}
var index=Math.abs(imgBox.offsetLeft/i);
if(index<=1){
circleMove(circleLen);//这里是小圆点的最大下标
}
else{
circleMove(index-2);
}
}
function moveR(){
if(sign){
offset(imgWidth*-1);
}
var index=Math.abs(imgBox.offsetLeft/imgWidth);
if(index<=circleLen-1){
circleMove(index);
}
else{
circleMove(0);
}
}
/*
左按钮 和 右按钮 点击切换图片
*/
prev.onclick=moveL;
next.onclick=moveR;
function circleMove(index)
{
for(var i=0;i<len;i++){
circles[i].className="oldColor";
}
circles[index].className="newColor";
}
function circleColorChange()
{
for(var i=0;i<len;i++)
{
circles[i].index=i;
circles[i].onmouseover=function(){
for(var j=0;j<len;j++){
circles[j].className="oldColor";
}
this.className="newColor"
imgBox.style.left=(this.index+1)*imgWidth*-1+"px";
}
}
}
circleColorChange();
animation=setInterval(function(){
moveR();
},2000);
slider.onmouseover=function(){
clearInterval(animation);
}
slider.onmouseout=function(){
animation=setInterval(function(){
moveR();
},2000);
}
}
有的地方还是没有尽善尽美 在兼容方面 还需要完善
没有报错 也没有BUG OJBK
- 还没有人评论，欢迎说说您的想法！
客服
