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部分
<script type="text/javascript">
/*
@1 图片移动时间
@2 图片大小
@3 节点对象{}
*/
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[0]);
var slider=$(objDom[1]);
var imgBox=$(objDom[2]);
var prev=$(objDom[3]);
var next=$(objDom[4]);
var sign=true;
var len=circles.length;
var circleLen=circles.length;
/*时间运动函数*/
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<=-2940){
imgBox.style.left="-490px";
}
else if(imgBox.offsetLeft>=0){
imgBox.style.left="-2450px";
}
/*
标记属性 上一张图片切换好了 才能开始开始下一次切换
*/
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);
console.log(index);
if(index<=1){
circleMove(circleLen);//这里是小圆点的最大下标
}
else{
circleMove(index-2);
}
}
//右按钮切换
function moveR(){
if(sign){
offset(imgWidth*-1);
}
var index=Math.abs(imgBox.offsetLeft/imgWidth);
console.log(imgBox.offsetLeft);
console.log(index);
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);
}
}
//调用
slider(500,490, {
0:".circles ul li",
1:".slider",
2:".box ul",
3:".prev",
4:".next"
});
</script>
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/12283.html