js之无缝轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图</title>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/carousel.css"/>
</head>
<body>
<div class="carousel">
<ul class="carousel-list">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
<div class="direction-btn">
<a href="javascript:;" class="prev">></a>
<a href="javascript:;" class="next"><</a>
</div>
<div class="dots">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<script src="js/common.js"></script>
<script src="js/carousel.js"></script>
</body>
</html>
/*
缓冲运动
obj：运动的对象
target：运动属性和终点值的对象
fn：回调函数
ratio：运动系数，默认值为8
*/
function bufferMove(obj,target,fn,ratio){
var ratio = ratio || 8;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var allOK = true;
for(var attr in target){
var cur = 0;
if(attr === 'opacity'){
cur = parseInt(getStyle(obj,'opacity') * 100);
} else{
cur = parseInt(getStyle(obj,attr));
}
var speed = (target[attr] - cur) / ratio;
speed = speed > 0? Math.ceil(speed) : Math.floor(speed);
var next = cur + speed;
if(attr === 'opacity'){
obj.style.opacity = next /100;
obj.style.filter = 'alpha( opacity = ' + next + ')';
} else{
obj.style[attr] = next + 'px';
}
if(next !== target[attr]){
allOK = false;
}
}
if(allOK){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},50);
}
//
///*
// 获取当前样式值
//*/
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
} //多属性函数封装 //封装获取样式的函数
// function getStyle(obj,attr){
// if(obj.currentStyle){
// return obj.currentStyle[attr];
// } else {
// return getComputedStyle(obj,false)[attr];
// }
// }
//封装类名的获取
function byClassName(sClassName){
if(document.getElementsByClassName){
return document.getElementsByClassName(sClassName);
} else {
var all = document.getElementsByTagName('*');
var result = [];
for(var i = 0;i <all.length;i++){
if(all[i].className === sClassName){
result.push(all[i]);
}
}
return result;
}
}
carousel.js
// 获取两个点击事件的元素
var oBtn = byClassName('direction-btn')[0],
// 获取大盒子
oCarousel = byClassName('carousel')[0],
// 获取存储图片的ul
oCarouselList = byClassName('carousel-list')[0],
// 获取ul下的li
oCarouselLi = oCarouselList.children,
// 获取上一个的点击按钮
oPrev = byClassName('prev')[0],
// 获取下一个的点击按钮
oNext = byClassName('next')[0],
// 记录图片下标
index = 0;
// 定义点的下标
dotIndex = 0;
// 定义常量图片的宽度
const iPerW = 590;
// 定义定时器
var timer = null;
var oDots = byClassName('dots')[0];
var oDotsA = Array.from(oDots.children);
//遍历a
oDotsA.forEach((v,k) =>{
v.onmouseover = function(){
index = k;
dotIndex = k;
bufferMove(oCarouselList,{left:-index * iPerW});
setDotClass();
}
}) function setDotClass(){
//遍历每个a标签
oDotsA.forEach(v => v.className='');
// 右侧a判断
if(dotIndex >= oDotsA.length){
dotIndex = 0;
}
// 左侧a判断
if(dotIndex < 0){
dotIndex = oDotsA.length - 1;
}
oDotsA[dotIndex].className = 'active';
} //添加第一张图片到末尾
oCarouselList.innerHTML += oCarouselLi[0].outerHTML;
//定义ul的总宽度
oCarouselList.style.width = iPerW * oCarouselLi.length + 'px';
oCarousel.onmouseover = function(){
clearInterval(timer);
oBtn.style.display = 'block';
}
oCarousel.onmouseout = function(){
autoMove();
oBtn.style.display = 'none';
}
//添加点击事件
oNext.onclick = function(){
rightMove();
}
function rightMove(){
index++;
dotIndex++;
if(index >= oCarouselLi.length){
index = 1;
oCarouselList.style.left = '0px';
}
bufferMove(oCarouselList,{left:-index * iPerW});
setDotClass();
}
//添加左侧点击事件
oPrev.onclick = function(){
index--;
dotIndex--;
if(index < 0){
index = oCarouselLi.length - 2;
oCarouselList.style.left = - (oCarouselLi.length - 1) * iPerW + 'px';
}
bufferMove(oCarouselList,{left:-index * iPerW});
setDotClass();
}
//自动播放
autoMove();
function autoMove(){
timer = setInterval(function(){
rightMove();
},3000);
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin: 0;
padding: 0;
}
body{
font-family:"Mrcrosoft Yahei",Arial;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
img{
border:none;
}
body{
background:lightblue;
}
.carousel{
width: 590px;
height: 340px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.carousel-list{
position: absolute;
}
.carousel-list li{
float: left;
}
.direction-btn{
display: none;
}
.direction-btn a{
position: absolute;
top: 50%;
margin-top: -30px;
width: 30px;
line-height: 60px;
background: rgba(0, 0, 0, .3);
color: #fff;
font-size: 30px;
text-align: center;
}
.prev {
left: 0;
}
.next {
right: 0;
}
.dots{
position: absolute;
background:rgba(255,255,255,.4);
border-radius: 12px;
width: 72px;
left: 0;
right: 0;
bottom: 10px;
margin: 0 auto;
font-size: 0;
line-height: 0;
padding: 0 4px;
}
.dots a{
display: inline-block;
width:10px;
height: 10px;
border-radius: 50%;
background: #fff;
margin: 6px 4px;
}
.dots .active{
background: red;
}
js之无缝轮播图的更多相关文章
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
随机推荐
- Elasticsearch之分词器的工作流程
前提 什么是倒排索引? Elasticsearch之分词器的作用 Elasticsearch的分词器的一般工作流程: 1.切分关键词 2.去除停用词 3.对于英文单词,把所有字母转为小写(搜索时不区分 ...
- Memcached prepend 命令
Memcached prepend 命令用于向已存在 key(键) 的 value(数据值) 前面追加数据 . 语法: prepend 命令的基本语法格式如下: prepend key flags e ...
- SpringBoot 玩转读写分离
环境概览 前言介绍 Sharding-JDBC是当当网的一个开源项目,只需引入jar即可轻松实现读写分离与分库分表.与MyCat不同的是,Sharding-JDBC致力于提供轻量级的服务框架,无需额外 ...
- javaScript tips —— z-index 对事件机制的影响
demo // DOM结构 class App extends React.Component { componentDidMount() { const div1 = document.getEle ...
- 定时模块app_timer用法及常见问题—nRF5 SDK模块系列二
app_timer是大家经常用到的一个库,app_timer的功能就是定时,也就是说,你在某一时刻启动一个app timer并设定超时时间,超时时间一到,app_timer就会回调timeout ha ...
- MySQL5.7 半同步复制
一.概述 5.5与5.7的半同步复制可能存在差异,从MySQL5.5开始,MySQL以插件的形式支持半同步复制 异步:默认情况下,MySQL复制是异步的.主库在执行完客户端提交的事务后会立即将结果返给 ...
- C++名字查找和重载
重载函数的定义:在同一作用域内的几个函数名字相同但形参列表不同,称为重载函数.这里有一个重要的前提就是:同一个作用域: 而如果重载函数是定义在不同的作用域,那么一旦编译器在当前作用域找到所需的名字,编 ...
- Spring Boot技术栈博客笔记（1）
要实现的核心功能 用户管理 安全设置 博客管理 评论管理 点赞管理 分类管理 标签管理 首页搜索 核心技术 数据存储 随着spring3发布以来,spring团队减少使用xml配置的使用,采用大量约定 ...
- C++函数参数中的省略号
本文基本是转载自:https://blog.csdn.net/think12/article/details/5785066 另一篇看到写得很好的博客:https://www.cnblogs.com/ ...
- el-table实现表格的编辑、删除、以及新增行的方法
直接上代码: html部分: <el-form :model="inServForm" ref="inServForm" label-width=&quo ...