html5carousel图片轮播,完整轮播图.html · YXM(做更好的自己)/Carousel figure - Gitee.com...



* {

padding: 0;

margin: 0;

list-style: none;

border: 0;

}

.all {

width: 500px;

height: 200px;

padding: 7px;

border: 1px solid #ccc;

margin: 100px auto;

position: relative;

}

.screen {

width: 500px;

height: 200px;

overflow: hidden;

position: relative;

}

.screen li {

width: 500px;

height: 200px;

overflow: hidden;

float: left;

}

.screen ul {

position: absolute;

left: 0;

top: 0px;

width: 3000px;

}

.all ol {

position: absolute;

right: 10px;

bottom: 10px;

line-height: 20px;

text-align: center;

}

.all ol li {

float: left;

width: 20px;

height: 20px;

background: #fff;

border: 1px solid #ccc;

margin-left: 10px;

cursor: pointer;

}

.all ol li.current {

background: yellow;

}

#arr {

display: none;

}

#arr span {

width: 40px;

height: 40px;

position: absolute;

left: 5px;

top: 50%;

margin-top: -20px;

background: #000;

cursor: pointer;

line-height: 40px;

text-align: center;

font-weight: bold;

font-family: '黑体';

font-size: 30px;

color: #fff;

opacity: 0.3;

border: 1px solid #fff;

}

#arr #right {

right: 5px;

left: auto;

}

• 
• 
• 
• 
• 

< >

//获取box层

var box=my$("box");

//获取screen层

var screen=box.children[0];

//获取screen层宽度

var imgWidth=screen.offsetWidth;

//获取ul

var ul=screen.children[0];

//获取ul中li标签

var lis=ul.children;

//获取ol

var ol=screen.children[1];

//获取焦点层

var arr=my$("arr");

//创建ol中li标签，并添加事件

for(var i=0;i

var li=document.createElement("li");

li.index=i;//添加一个自定义属性，将来移动图片的时候用

ol.appendChild(li);

li.innerHTML=parseInt(i+1);

li.οnmοuseοver=function(){//鼠标进入事件

//设置当前li的样式---排他

for(var j=0;j

ol.children[j].removeAttribute("class");

}

this.className="current";

//设置图片

var pic=parseInt(this.index);

var target=-pic*imgWidth;

animate(ul,target);

};

}

//设置页面加载时默认的ol中样式

ol.children[0].className="current";

//创建ul中最后一个li，和第一个一样

var li=lis[0].cloneNode(true);

ul.appendChild(li);

//进入层显示和隐藏焦点层

box.οnmοuseοver=function(){//鼠标进入事件

arr.style.display="block"; //显示焦点层

clearInterval(setId);//清理计时器

};

box.οnmοuseοut=function(){//鼠标离开事件

arr.style.display="none";//隐藏焦点层

setId=setInterval(rightHandle,1000);//继续开始计时器

};

setId=setInterval(rightHandle,1000);//页面加载时开始自动播放

//右焦点事件

var pic=0;

my$("right").οnclick=rightHandle;

function rightHandle(){

if(pic==ol.children.length){//pic=5

pic=0;

ul.style.left="0px";

}

pic++;

animate(ul,-pic*imgWidth);

//设置ol中span的样式

if(pic==ol.children.length){//pic=5

ol.children[0].className="current";

ol.children[ol.children.length-1].removeAttribute("class");

}else{

for(var j=0;j

ol.children[j].removeAttribute("class");

}

ol.children[pic].className="current";

}

}

//左焦点事件

my$("left").οnclick=function(){

if(pic==0){

pic=ol.children.length;

ul.style.left=-pic*imgWidth+"px";

}

pic--;

animate(ul,-pic*imgWidth);

for(var j=0;j

ol.children[j].removeAttribute("class");

}

ol.children[pic].className="current";

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史