面向对象无缝滚动轮播(附带面向过程代码)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner</title>
<link rel="stylesheet" href="CSS/main1.css">
</head>
<body>
<div class="banner-wrapper" id="banner-wrapper">
<div class="banner" id="banner">
<img src="images/8.jpg" alt="假象图">
<img src="images/1.jpg" alt="广告图">
<img src="images/2.jpg" alt="广告图">
<img src="images/3.jpg" alt="广告图">
<img src="images/4.jpg" alt="广告图">
<img src="images/5.jpg" alt="广告图">
<img src="images/6.jpg" alt="广告图">
<img src="images/7.jpg" alt="广告图">
<img src="images/8.jpg" alt="广告图">
<img src="images/1.jpg" alt="假象图">
</div>
<div class="btn prev" id="prev">&lt;</div>
<div class="btn next" id="next">&gt;</div>
<ul class="circle" id="circle">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="JS/object.js"></script>
</body>
</html>

面向对象js代码

window.onload = function() {
new Banner(‘banner-wrapper‘)
}

function Banner(id) {
var _this = this
var bannerWrapper = document.getElementById(id)
this.banner = document.getElementById(‘banner‘)
this.oimg = banner.getElementsByTagName(‘img‘)[0]
this.imglen = banner.getElementsByTagName(‘img‘).length
this.oimgW = this.oimg.clientWidth
this.prevBtn = document.getElementById(‘prev‘)
this.nextBtn = document.getElementById(‘next‘)
this.circle = document.getElementById(‘circle‘)
this.ali = circle.getElementsByTagName(‘li‘)
this.num = 1;
this.Timer = null;

aliActive = function() {
_this.aliActive(this)
}

imgChange = function() {
_this.imgChange(this)
}
autoPlay = function() {
_this.autoPlay(this)
}

//下一张
this.nextBtn.onclick = function() {
_this.imgChange(this)
}
//上一张
this.prevBtn.onclick = function() {
_this.prevClick(this)
}

// 鼠标移入时清除定时器
bannerWrapper.onmouseover = function() {
clearInterval(_this.Timer);
}
// 鼠标移出时继续播放
bannerWrapper.onmouseout = function() {
_this.autoPlay(this)
}
// 启动定时器
_this.autoPlay(this)

/*滑动悬浮下标小圆点进行切换*/
for (var i = 0; i < this.ali.length; i++) { //遍历li

this.ali[i].index = i; //下标索引
this.ali[i].onmouseover = function() {
_this.aliOnmouseover(this)
}
}
}

Banner.prototype.prevClick = function() {
var _this = this
this.num--;
if (this.num == 0) {
this.num = 9;
this.banner.style.left = -this.num * this.oimgW + ‘px‘;
this.banner.style.transition = ‘all 0s‘;
this.banner.style.webkitTransition = ‘all 0s‘;
this.num = 8;
}

setTimeout(function() {
_this.Transition(this)
}, 0);
aliActive();
}

Banner.prototype.Transition = function() {
this.banner.style.left = -this.num * this.oimgW + ‘px‘;
this.banner.style.transition = ‘all 1s‘;
this.banner.style.webkitTransition = ‘all 1s‘;
}

Banner.prototype.imgChange = function() {
var _this = this
this.num++;
if (this.num == 9) {
this.num = 0;
this.banner.style.left = -this.num * this.oimgW + ‘px‘;
this.banner.style.transition = ‘all 0s‘;
this.banner.style.webkitTransition = ‘all 0s‘;
this.num = 1;
}
setTimeout(function() {
_this.Transition(this)
}, 0);
_this.aliActive(this)
}

Banner.prototype.aliActive = function(oLi) {
for (var i = 0; i < this.ali.length; i++) {
this.ali[i].className = ‘‘;
}
this.ali[this.num - 1].className = ‘active‘;
}

Banner.prototype.autoPlay = function() {
var _this = this
_this.Timer = setInterval(function() {
_this.imgChange(this)
}, 2000);
}

Banner.prototype.aliOnmouseover = function(oLi) {
for (var j = 0; j < this.ali.length; j++) {
this.ali[j].className = ‘‘;
}
oLi.className = ‘active‘;
this.num = oLi.index + 1; //由于图片跟索引下标相差1 因此+1
this.banner.style.left = -this.num * this.oimgW + ‘px‘;
this.banner.style.transition = ‘all 1s‘;
this.banner.style.webkitTransition = ‘all 1s‘;

}

面向过程js代码

window.onload = function() {

var bannerWrap = document.getElementById(‘banner_wrap‘);
var banner = document.getElementById(‘banner‘);
var prevBtn = document.getElementById(‘prev‘);
var nextBtn = document.getElementById(‘next‘);
var oimg = banner.getElementsByTagName(‘img‘)[0];
var oimgW = oimg.clientWidth; //获取一张图片的宽度
var cir = document.getElementById(‘circle‘);
var ali = cir.getElementsByTagName(‘li‘); //获取li的集合
/*var num = 0;*/ //num从0开始记 0 1 2 3...6 7 没有假象图初始化为0
var num = 1; //由于前面添加了假象图 因此初始化为1；
var len = banner.getElementsByTagName(‘img‘).length; // 图片的数量

/*封装函数*/
function imgChange() {
// banner.style.left = -oimgW + ‘px‘;//移动一张图片 添加一个变量可改变n张图片的宽度
num++;
// if (num == 8) { //对num的值进行判断
// num = 0;
// }
if (num == 9) { //由于假象图 初始值为1，因此判断要加1；
num = 0;
banner.style.left = -num * oimgW + ‘px‘; //跳回假象图
banner.style.transition = ‘all 0s‘; //跳回假象图 不要过度效果
banner.style.webkitTransition = ‘all 0s‘;
num = 1; //从假象图到真1图 实现有过渡效果 不加上num=1 会出现undefined
}
setTimeout(function() { //内部函数语句
banner.style.left = -num * oimgW + ‘px‘; //移动图片的宽度进行位移
banner.style.transition = ‘all 1s‘; //过渡动画
banner.style.webkitTransition = ‘all 1s‘;
}, 0)
// setTimeout 运行机制 先执行主线程里的语句，之后再执行内部函数里面的语句
/*banner.style.left = -num * oimgW + ‘px‘; //移动图片的宽度进行位移
banner.style.transition = ‘all 1s‘; //过渡动画
banner.style.webkitTransition = ‘all 1s‘;*/
/*js dom 操作的合并机制 因此引入定时器 实现假象图跳转真图无过渡效果*/

// for (var i = 0; i < ali.length; i++) { //消除其他li的样式
// ali[i].className = ‘‘;
// }
// 由于初始值改为1，因此num要-1才能让小标圆点对应上
// /*ali[num].className = ‘active‘;*/
// ali[num - 1].className = ‘active‘;
aliActive();

//给移动的图片添加active样式 同时也要消除其他li的样式 因此用for循环
}

/*封装aliActive*/
function aliActive() {
for (var i = 0; i < ali.length; i++) {
ali[i].className = ‘‘;
}
/* ali[this.index].className = ‘active‘; //this.index == num-1*/
ali[num - 1].className = ‘active‘;
}

/*切换下一张*/
nextBtn.onclick = function() {
imgChange();
}

/*切换上一张*/
prevBtn.onclick = function() {
num--;
if (num == 0) {
num = 9;
banner.style.left = -num * oimgW + ‘px‘;
banner.style.transition = ‘all 0s‘;
banner.style.webkitTransition = ‘all 0s‘;
num = 8;
}
setTimeout(function() {
banner.style.left = -num * oimgW + ‘px‘;
banner.style.transition = ‘all 1s‘;
banner.style.webkitTransition = ‘all 1s‘;
}, 0);
aliActive();
}

/*定时切换*/
var Timer = null;

function Move() {

Timer = setInterval(function() {
imgChange();
}, 2000)
}
/*封装的函数不会自动执行 因此要启动定时器*/
Move();

/*鼠标滑过清除滑动(定时器)*/
bannerWrap.onmouseover = function() {
clearInterval(Timer);
}
/*鼠标移出继续滑动(定时器) 因此封装定时切换*/
bannerWrap.onmouseout = function() {
Move();
}

/*滑动悬浮下标小圆点进行切换*/
for (var i = 0; i < ali.length; i++) { //遍历li
ali[i].index = i; //下标索引
ali[i].onmouseover = function() {
num = this.index + 1; //由于图片跟索引下标相差1 因此+1
aliActive();

banner.style.left = -num * oimgW + ‘px‘;
banner.style.transition = ‘all 1s‘;
banner.style.webkitTransition = ‘all 1s‘;
}
}
}

时间： 2024-10-11 04:23:38

面向对象无缝滚动轮播(附带面向过程代码)的相关文章

js原生选项（包含无缝滚动轮播图）一

原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添加,注意this的指向和自定义属性的应用 html代码: <div id="tab"> <input class="on" type="button" value="aaa"> <input type

js原生选项（自动播放无缝滚动轮播图）二

今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走的代码,也可以放向左走的代码,然后在js加载的时候先执行一次,保证页面加载的时候轮播图是自动播放的,当然在鼠标悬停在遮罩层的时候我们需要清除这个定时器,让自动播放功能关闭,然后在鼠标再次移出遮罩层的时候再次开启定时器,这样就实现了自动播放的功能.然后今天的轮播图中我添加了开关的功能,这个开关是为了避

基于面向对象的图片轮播（js原生代码）

无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享----基于面向对象思想的图片轮播.其效果如下所示: 正如图片所示这样我们要实现的效果,这里与我们以往不同的是我们的布局十分简洁.其中html布局如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset

jQuery无缝滚动轮播图

//html部分<div class="lunbo right"> <div class="show"> <a href="#"><img src="images/cbda425ea72ec5013b8388ae982e9a52.jpg" alt=""/></a> <a href="#"><img src=&q

无缝滚动轮播图

代码: 1 $(function() { 2 var index = 1; 3 var index1 = 0; 4 $('.right').click(function() {// 点击显示下一张 5 index++; 6 index1++; 7 if (index1 > 4) { 8 index1 = 0; 9 } 10 // console.log(-100*index+'%'); 11 $('#img').animate({ 12 left: -100 * index + '%' 13 }

图片轮播之面向过程写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ul{list-style:none;} ul,body{margin:0;padding:0;} .slide-box{position:relat

JS纯生实现无缝滚动轮播图

1.定时器加上以后需要进入一次才能引用,所以在上面提前调用一次定时器: 2.当在实现下标小按钮的时候一定要给第三部的num赋值: 3.切记谁做动画谁加定位

js面向对象实现图片轮播插件

这个demo的学习过程很值得记录下来. 前言:学习了一遍js的面向对象,想找点东西练练手,就上网找了个用js面向对象实现图片轮播插件: http://www.codefans.net/jscss/code/3327.shtml 功能:新建一个实例就是一个图片轮播,可以新建多个,但是实例与实例之间是干扰的. 过程:看视频教程说,第一次搞面向对象,把面向过程改头换面就可以了.自己就死磕地先写了原生,再改为面向对象. 写原生的时候,遇到的问题: 不知道怎么样停止计时器:clearInterval.cl

原生JS面向对象思想封装轮播图组件

原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能实现都分别分为不同的模块.目前我封装的这个版本还不适配移动端,只适配PC端. 主要的功能有:自动轮播,点击某一张图片对应的小圆点就跳转到指定图片,有前后切换按钮.使用的时候只需要传入图片的路径以及每张图片分别所对应的跳转路径还有目标盒子ID就可以了,还可以自定义每张图轮播的延时,不过延时参数不是必须