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布局,所以没有使 ...
随机推荐
- SpringBoot集成Mybatis-PageHelper分页工具类，实现3步完成分页
在Mybatis中,如果想实现分页是比较麻烦的,首先需要先查询出总的条数,然后再修改mapper.xml,为sql添加limit指令. 幸运的是现在已经不需要这么麻烦了,刘大牛实现了一个超牛的分页工具 ...
- scala（一）方法&函数
写在前面 众所周知,scala一向宣称自己是面向函数的编程,(java表示不服,我是面向bean的编程!)那什么是函数? 在接触java的时候,有时候用函数来称呼某个method(实在找不出词了),有 ...
- hdu4310 - Hero - 简单的贪心
2017-08-26 15:25:22 writer:pprp 题意描述: • 1 VS n对战,回合制(你打他们一下,需要受到他们所有存活人的攻击)• 你的血量无上限,攻击力为1• 对手血量及攻击 ...
- Asp.Net MVC 请求原理分析
分析Asp.Net MVC的请求过程,我们从以下几方面看: 配置:IIS网站的配置可以分为两个块:全局 Web.Config 和本站 Web.Config . Asp.Net Routing属于全局性 ...
- H5唤起app
H5唤起app 1.判断是否在微信中打开 无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽sc ...
- Android-----代码实现打开手机第三方应用APP
最近做一个项目,有一个需要启动第三方应用,和微信的地图查看差不多,需要启动高德,百度或腾讯地图来查看:特来分享,希望有所帮助. 案例效果如图: 要想启动第三方:首先要知道他的包名 一:高德 高德:co ...
- 使用Mysql Workbench 导入数据库提示 ERROR 1227 (42000) at line 18: Access denied; you need (at least one of) the SUPER privilege(s) for
今天再复制服务器上数据库的时候(使用Mysql Workbench )提示1227错误, 数据库版本5.7.18,复制到的数据库也是5.7.18. 总结一下网上的几种方法: 方法一: 最直观的翻译是说 ...
- [nodejs]npm国内npm安装nodejs modules终极解决方案
此方案用于设置代理和修改镜像地址都不能解决问题使用 1.npm root 确认node模块的根文件夹,全局要加-g. osx同样是此命令,先清除缓存. npm cache clean C:\Users ...
- JQuery对象与javascript对象的转换
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象. jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&qu ...
- Hrbust 1535 相爱
Description 静竹在斐波那契的帮助下,渐渐的和数学相爱了.和数学在一起最有意思的就是它能够出一些特别有意思并且巧妙的题目让静竹来思考.这次也不例外,给静竹两个数a,b,又给出了加,减,乘,除 ...