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

最新推荐文章于 2020-03-22 18:51:51 发布
最新推荐文章于 2020-03-22 18:51:51 发布
阅读量128 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/LiangTianFu/p/8035300.html
版权

<!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>

CSS代码：

*{margin: 0;padding: 0}
body{background: #f3f5f7;font-size: 14px;}
ul{
list-style: none;
}
.banner-wrapper{
width: 520px;height: 280px;position: relative;margin: 50px auto;border:3px solid #999; overflow: hidden;
}
.banner{
position: absolute;width: 5200px;left: -520px;
}
.banner img{
float: left;
}
//图片
// .banner-wrapper .btn{position: absolute;top: 50%;width: 35px;height: 80px;margin-top: -40px;background: url(../images/btn.png) no-repeat;display: none;opacity: 0.6;}
// .banner-wrapper:hover .btn{display: block;}
// .banner-wrapper .btn:hover{opacity: 1;}
// .banner-wrapper .prev{left: 0;background-position: -73px 0; }
// .banner-wrapper .next{right: 0;background-position: 0 0;}
.banner-wrapper .btn{position: absolute;top: 50%;width: 35px;height: 70px;line-height: 60px;margin-top: -35px;text-align: center;background:#000;opacity: 0.6;font-size: 36px;color: #fff;display: none;cursor: pointer;}
.banner-wrapper:hover .btn{display: block;}
.banner-wrapper .btn:hover{opacity: 0.9;}
.banner-wrapper .prev{left: 0;border-radius: 0 32px 32px 0;}
.banner-wrapper .next{right: 0;border-radius: 32px 0 0 32px;}
.banner-wrapper .circle{position: absolute;bottom: 20px;left: 35%;background: hsla(0,0%,100%,0.4);padding: 5px;border-radius: 12px;}
.banner-wrapper .circle li{width: 15px;height:15px;background: #fff;float: left;border-radius: 50%;margin:0 4px;cursor: pointer;}
.banner-wrapper .circle li.active{background: orange;}

 

面向对象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';
}
}
}

代码演示地址： https://liangtianfu.github.io/ObjectBanner/objectbanner.html

转载于:https://www.cnblogs.com/LiangTianFu/p/8035300.html

bangai2527
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js手写轮播图
godfather111111的博客
08-07 203
首先我们要知道轮播图的图片应为动态添加，这样后期才方便添加别的图片，当然图片的序号也要动态添加，毕竟得与图片数量对应，然后就是要添加页面左右两边的小箭头了(当鼠标移出轮播图后自动隐藏)，已及创建定时器让图片能自动轮播，以及最关键，当图片轮播到最后一页后，会自动将第一张图片添加到后面，最终才能实现轮播效果。1、先思考 轮播图是怎么实现的？...
0原生js-面向对象-无缝轮播图.zip
09-29
使用原生javascript + 使用面向对象思想，编写无缝轮播图特效。
原生js实现无缝轮播（包括面向对象的写法）
12-13
原生js实现无缝轮播（包括面向对象的写法），包括实现思路。
面向对象无缝轮播图
Alone patients的博客
09-04 239
面向对象无缝最基础样式轮播图 （如果有简单的方法大家可以私聊我讨论下） css body,ul,li{ margin: 0; padding: 0; } img{ display: block; } li{ list-style: none; } #box{ position: relative; width: 900px; height: 300px; overflow: hid...
案例 - 无缝轮播图面向对象两种写法
三季雨
01-19 406
单例模式 预加载 涉及知识点： 单例模式： currentTarget与target currentTarget始终是监听事件者，即 直接调用addEventlistener那个节点 而target是事件的真正发出者， 即 触发事件的节点，在click事件中就是被点击的节点。 constructor 属性返回对创建此对象的数组函数的引用。 用法1判断类型 parent.constructor===...
JavaScript基于面向对象实现的无缝滚动轮播示例
10-15
这个无缝滚动轮播示例展示了如何使用JavaScript面向对象编程来封装复杂的功能，使得代码更易于理解和维护。通过创建类，我们可以更好地组织和复用代码，同时也更容易扩展和修改功能，以适应不同的需求。在实际项目中...
原生JS实现无缝滚动轮播图
03-11
本教程将深入探讨如何使用原生JavaScript（JS）实现一个无缝滚动轮播图，无需依赖任何外部库，如jQuery或其他轮播插件。 首先，我们需要创建HTML结构。一个简单的轮播图通常包含一个容器div，以及若干个用于展示...
js实现无缝滚动轮播图
11-27
无缝滚动轮播图则是这种展示方式的一种升级，它使得用户在浏览过程中感觉不到图片的切换，形成一种连续的滚动效果。本篇文章将详细介绍如何使用JavaScript和jQuery来实现这一功能，以及如何通过导航条进行左右切换。...
JavaScript中使用面对对象实现无缝轮播图
mikkfe的博客
03-03 363
使用js实现简易的无缝轮播图，利用面向对象的功能，对轮播图进行功能拆分： 1.选择元素（属性） 2.完善布局（方法） 3.绑定事件（方法） 4.改变索引（方法） 5.设置imgbox的位置(方法) 首先需要对其进行一个布局 <body> <div id="box"> <div class="imgbox"> <a>&lt...
无缝滚动轮播图
08-19
JS实现无缝滚动轮播图，支持点击，有索引，自动轮播
carousel-slide:JQuery面向对象实现无限轮播组件
04-30
无限轮播组件 面向对象方法实现无限轮播组件 实现功能 自动轮播 左右按钮点击切换上一张、下一张 底部状态随轮播索引变化 鼠标移入/移除，轮播停止/继续 实现思路 面向对象方法编程 初始化 绑定事件 为事件添加方法 调用 难点 该组件为无限轮播组件，CSS把图片并排，当向左滚动到最后一张或向右滚动到第一张时，继续滚动显示空白图片。 解决方法 使用JS在第一张图片前添加最后一张图片，在最后一张图片后添加第一张图片。 this.$imgCt.append(this.$imgs.first().clone()) this.$imgCt.prepend(this.$imgs.last().clone()) this.$imgCt.width((this.imgCount + 2) * this.imgWidth) this.$imgCt.css('left', -this.imgWidth) 向左滚
面向对象的轮播
weixin_34293059的博客
01-15 68
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .clearfix:after{ clear: both; content: ""; height:0; display: blo...
html滚动轮播实现
holeeye的专栏
06-17 3090
类似于这样的滚动轮播要如何实现呢？
实现滑动的7种方法
yuyang_1995
07-07 3222
    通过一个案例， 来看看在Android 中该如何实现滑动效果。 定义一个View， 并置于一个LinearLayout 中， 实现一个简单布局， 代码如下：&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" and...
面向对象-js原生轮播图-从零到一
小方块的世界
05-05 599
js原生轮播图面向对象编程js原生实现轮播图效果1.先看效果图2.需要实现的功能：3.html结构4.功能实现4.1 创建对象4.2动画效果由translateX实现4.3根据轮播图片个数生成数字按钮节点4.4轮播图数字按钮点击切换状态4.5轮播事件，也是点击右箭头的事件4.6事件绑定4.7初始化方法4.8实例化Carousel对象，大功告成5备注 面向对象编程js原生实现轮播图效果 1.先看效果...
JavaScript面向对象编程实例：无缝轮播图的设计与实现
qq_43497650的博客
03-22 284
面向对象可以说是JavaScript中非常重要的知识，今天就用js面向对象的方法来实现一下无缝轮播图。 首先，我们先对无缝轮播图这个需求进行面向对象分析（OOA）：轮播图的实现可以大致分为这四个模块1.元素选择；2.事件绑定；3.动画效果；4.自动播放。 然后，就是要进行面向对象设计（OOD）： function Banner(){ }; Banner.prototype = { ...
浅谈无缝轮播图插件封装
weixin_40664002的博客
11-11 162
前言：页面中轮播图，对于一个前端开发者来说，是最基本的技能，不论是的商城网站，还是企业站，轮播图已经成为不可缺少的一个模块，而常见的轮播图不外乎两种，一种是渐隐渐现轮播图，一种是无缝轮播图。网上关于轮播图的件也有很多，但是用人家的代码总会出现各种各样的bug，我们修改bug往往要耗费很多时间，而且有些插件的效果还不符合我们的需求，那么我们该如何封装一个自己的轮播插件呢？这就是我们今天的任务，封装轮...
vue3轮播图无缝滚动代码
最新发布
06-13
Vue3中的轮播图无缝滚动通常使用轮播插件或自定义组件来实现，常见的库如`vue-awesome-swiper`或者`vue-slick-carousel`。以下是一个简单的`vue-awesome-swiper`的无缝滚动示例代码： ```html <template> <swiper :options="swiperOptions"> <swiper-slide v-for="(item, index) in items" :key="index"> <img :src="item.src" :alt="item.alt"> </swiper-slide> <!-- 如果你想添加导航按钮 --> <div class="swiper-button-prev" @click="prevSlide"></div> <div class="swiper-button-next" @click="nextSlide"></div> </swiper> </template> <script setup> import { ref, onMounted } from 'vue'; import { swiper, SwiperSlide } from 'vue-awesome-swiper'; const swiperOptions = ref({ // 设置轮播图选项，例如自动播放、循环、速度等 loop: true, // 开启无缝滚动 autoplay: { delay: 3000, // 每隔3秒切换到下一张 }, pagination: { el: '.swiper-pagination', }, }); let currentSlide = ref(0); // 当前索引 onMounted(() => { // 初始化Swiper实例 const swiperInstance = swiper(swiperOptions.value); // 监听滑动事件 swiperInstance.on('slideChangeTransitionEnd', () => { currentSlide.value = swiperInstance.realIndex; // 更新当前索引 }); }); // 方法用于切换到上一张和下一张 function prevSlide() { if (currentSlide.value > 0) { currentSlide.value--; } } function nextSlide() { const slidesCount = swiperOptions.value.slides.length; if (currentSlide.value + 1 < slidesCount) { currentSlide.value++; } } </script> <style scoped> .swiper-button-prev, .swiper-button-next { /* 根据你的样式需求进行定制 */ } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值