demo 完整的轮播图（焦点，自动，左右按钮）
2019-04-15 16:50发布
生成海报
css清单
*{
margin: 0;
padding: 0;
}
img{
vertical-align: top;
}
.banner{
width: 800px;
height: 345px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider{
width: 800px;
height: 300px;
}
.pic{
width: 1600px;
height: 300px;
}
.pic-img{
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 300px;
}
.pig-img img{
width: 100%;
}
.btn{
text-align: center;
padding-top: 5px;
}
.btn-icon{
width: 24px;
height: 20px;
display: inline-block;
background: url(../images/icon.png) no-repeat -24px -782px;
margin: 0 5px;
cursor: pointer;
text-indent: -20em;
overflow: hidden;
}
.bg-icon{
background-position: -24px -762px;
}
.left,.right{
width:39px;height:79px;
background:url(../images/left_right.png) no-repeat;
cursor:pointer;
position:absolute;
top: 36%;
opacity: 0;
}
.left{
left:0;
background-position:-17px -10px;
}
.right{
right:0;
background-position:-64px -10px;
}
function $(id){ // 获取 id
return document.getElementById(id);
}
// 屏幕到上和到右距离（兼容）
function scroll(){
if(window.pageXOffset != null){ // ie9 +
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if(document.compatMode == "CSS1Compat"){ // 标准模式
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}else{ // 怪异模式
return {
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
}
// 屏幕宽高（兼容）
function client(){
if(window.innerWidth != null){ // ie9 +
return {
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode == "CSS1Compat"){ // 标准模式
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}else{ // 怪异模式
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
}
// 匀速动画 右走
function animate1(obj,speed,target){
obj.timer = setInterval(function(){
if(obj.offsetLeft>target){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft + speed + "px";
}
},50)
}
// 匀速动画可左可右
function animate2(obj,target){
clearInterval(obj.timer);
var speed = obj.offsetLeft - target < 0 ? 10 : -10;
obj.timer = setInterval(function(){
var run = target - obj.offsetLeft;
if(Math.abs(run)<=10){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft + speed +"px";
}
},30)
}
// 缓动向右动画
function animate3(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetLeft)/10;
console.log(speed);
speed = speed>0?Math.ceil(speed) :Math.floor(speed);
obj.style.left = obj.offsetLeft + speed +"px";
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
},50)
}
// 获取样式属性（兼容）
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
// 缓动动画 任何方向
function animate4(obj,attr,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cus = parseInt(getStyle(obj,attr));
var speed = (target - cus) /10;
speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
if(cus == target){
clearInterval(obj.timer);
}else{
obj.style[attr] = cus + speed + "px";
}
},30)
}
// 缓动动画 传多个属性
function animate5(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
var cus = parseInt(getStyle(obj,attr));
var speed = (json[attr] - cus) /10;
speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);
if(cus == json[attr]){
clearInterval(obj.timer);
}else{
obj.style[attr] = cus + speed + "px";
}
}
},30)
}
// 缓动动画 传多个属性 + 回调
function animate6(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var leader = parseInt(getStyle(obj,attr));
var speed = (json[attr] - leader)/10;
speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
obj.style[attr] = leader + speed + "px";
if(leader!=json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},20)
}
// 缓动动画 多个属性 + 回调 + 透明度 + zindex
function animate(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var leader = 0;
if(attr == "opacity"){
leader = parseInt(getStyle(obj,attr)*100);
}else{
leader = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - leader)/10;
speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
if(attr == "opacity"){
obj.style.opacity = (leader + speed)/100;
}else if(attr == "zIndex"){
obj.style.zIndex = json[attr];
}else{
obj.style[attr] = leader + speed + "px";
}
if(leader!=json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},20)
}
window.onload = function(){
function $(id){
return document.getElementById(id);
}
var banner = $("js_banner"); //获取最大盒子
var pic = $("js_pic"); //滚动图片的父亲
var imgs = pic.children; //获取所有需要滚动图片，存为一个组；
var btn = $("js_btn"); //获取按钮控制按钮的父盒子
for(var i=0;iimgs.length-1 ? iNow = 0 : iNow; //当前图片索引减减，就是上一张图片
imgs[iNow].style.left = scrollWidth + "px"; //让上一张图片出现在当前显示的左边，这样可以看起来是从左边出来的
animate(imgs[iNow],{left:0}); //让上一张图片从左边到屏幕中间，实现动画效果
setBtn();
}
var timer = null;
timer = setInterval(autoPlay,3000);
banner.onmouseover = function(){
animate(btn.children[0],{opacity:100});
animate(btn.children[spans.length-1],{opacity:100});
clearInterval(timer);
};
banner.onmouseout = function(){
clearInterval(timer);
animate(btn.children[0],{opacity:0 });
animate(btn.children[spans.length-1],{opacity:0});
timer = setInterval(autoPlay,3000);
};
};
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.xiaopingtou.cn//data/attach/topic/topicKPo7gB.jpg', '推荐 jnchenglei 的文章《demo 完整的轮播图（焦点，自动，左右按钮）》','https://www.xiaopingtou.net/article-62567.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}