js实现无缝轮播图特效


Posted in Javascript onMay 09, 2020

用原生js实现无缝轮播图,供大家参考,具体内容如下

index.js:

var config = {
 imgWidth:380,//图片尺寸
 dotWidth:8,//小圆点尺寸
 doms:{
 divImgs:document.querySelector('.imgs'),
 divDots:document.querySelector('.circle'),
 divDirection:document.querySelector('.direction'),
 divContainer:document.querySelector('.container')
 },
 curIndex:0,//实际图片索引,0 ~ imgNumber-1
 timer:{
 duration:16,//运动间隔时间
 total:1000,//总时间
 id:null//计时器编号
 }
}
//图片的数量
config.imgNumber = config.doms.divImgs.children.length;
//初始化元素尺寸
config.imgsWidth = (config.imgNumber + 2)*config.imgWidth;
config.dotsWidth = (config.imgNumber + 2)*config.dotWidth;

//初始化
function inti(){
 intiWidth();
 intiCount();
 intiElement();
 intiPosition();
 function intiWidth(){
 config.doms.divImgs.style.width = config.imgsWidth + 'px';
 config.doms.divDots.style.width = config.dotsWidth + 'px';
 }
 function intiCount(){
 for(var i = 0; i < config.imgNumber; i ++){
 var p = document.createElement('p');
 config.doms.divDots.appendChild(p);
 }
 }
 function intiElement(){
 var first = config.doms.divImgs.children[0],last = config.doms.divImgs.children[config.imgNumber-1];
 var newImg = first.cloneNode(true);//深度克隆
 config.doms.divImgs.appendChild(newImg);
 newImg = last.cloneNode(true);
 config.doms.divImgs.insertBefore(newImg,first);
 }
 function intiPosition(){
 var left = (-config.curIndex-1)*config.imgWidth;
 config.doms.divImgs.style.marginLeft = left + 'px';
 setDots();//小圆点的激活状态位置设置
 }
}
inti();

//小圆点的激活状态位置设置
function setDots(){
 for(var i = 0; i < config.doms.divDots.children.length; i++){
 var dot = config.doms.divDots.children[i];
 if(i === config.curIndex){
 dot.className = 'select';
 }else{
 dot.className = '';
 }
 }
}

/*
 图片切换
 index: 图片索引
 directions: 图片切换方向(left,right)
*/
function switchTo(index,directions){
 if(index === config.curIndex){
 return;
 }
 if(!directions){
 directions = 'right';//默认状态下向右切换图片
 }

 //最终的显示图片; 图片容器的marginLeft
 var newLeft = (-index-1)*config.imgWidth;
 animateSwitch();
 //config.doms.divImgs.style.marginLeft = newLeft + 'px';
 
 //小圆点的激活状态位置设置
 config.curIndex = index;
 setDots();

 //一张图片的总运动次数
 var number = Math.ceil(config.timer.total/config.timer.duration);
 //当前运动次数
 var curNumber = 0;
 
 var distance,//总运动距离
 totalWidth = config.imgNumber*config.imgWidth,
 marginLeft = parseFloat(getComputedStyle(config.doms.divImgs).marginLeft);
 if(directions === 'left'){
 if(newLeft < marginLeft){
 distance = newLeft - marginLeft;
 }else{
 distance = -(totalWidth-Math.abs(newLeft - marginLeft));
 }
 }
 if(directions === 'right'){
 if(newLeft > marginLeft){
 distance = newLeft - marginLeft;
 }else{
 distance = totalWidth-Math.abs(newLeft - marginLeft);
 }
 } 

 //每次改变的距离
 var everDistence = distance/number; 

 //逐步改变marginLeft
 function animateSwitch(){
 clearAnimate();
 config.timer.id = setInterval(function(){

 marginLeft += everDistence;
 if(directions === 'left' && Math.abs(marginLeft) > totalWidth){
 marginLeft += totalWidth;
 }
 else if(directions === 'right' && Math.abs(marginLeft) < config.imgWidth){
 marginLeft -= totalWidth;
 }
 config.doms.divImgs.style.marginLeft = marginLeft + 'px';

 curNumber ++;
 if(curNumber === number){
 clearAnimate();
 }
 },config.timer.duration);
 }

 //清空计时器
 function clearAnimate(){
 clearInterval(config.timer.id);
 config.timer.id = null;
 }
}

//默认情况下自动向右轮播图片
var timer = setInterval(function(){
 toRight();
},2000);
config.doms.divContainer.onmouseleave = function() {
 timer = setInterval(function(){
 toRight();
 },2000);
}
//鼠标移出则清空定时器
config.doms.divContainer.onmouseover = function() {
 clearInterval(timer);
}

//左右点击事件
config.doms.divDirection.onclick = function(e){
 clearInterval(timer);
 if(e.target.classList.contains('left')){
 toLeft();
 }
 if(e.target.classList.contains('right')){
 toRight();
 }
}

function toLeft(){
 var index = config.curIndex - 1;
 if(index < 0){
 index = config.imgNumber - 1;
 }
 switchTo(index,'right');
}
function toRight(){
 var index = config.curIndex + 1;
 if(index > config.imgNumber - 1){
 index = 0;
 }
 switchTo(index,'left');
}

//小圆点点击事件
config.doms.divDots.onclick = function(e){
 if(e.target.tagName === 'P'){
 var index = Array.from(this.children).indexOf(e.target);
 switchTo(index,index > config.curIndex? 'left' : 'right')
 }
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>无缝轮播图</title>
 <link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
 <div class="container">
 <div class="imgs">
 <img class="item" src="../imagejpg/1.jpg" alt="">
 <img class="item" src="../imagejpg/2.jpg" alt="">
 <img class="item" src="../imagejpg/3.jpg" alt="">
 </div>
 <div class="circle">
 <!-- <p></p>
 <p class="select"></p>
 <p></p>
 <p></p>
 <p></p> -->
 </div>
 <div class="direction">
 <div class="item left"><</div>
 <div class="item right">></div>
 </div>
 </div>
 <script src="./index.js">
 
 </script>
</body>
</html>

index.css:

.container{
 width:380px;
 height:250px;
 border:1px solid;
 margin:0 auto;
 position:relative;
 overflow: hidden;
}
.container .imgs{
 
}
.container .imgs .item{
 width:380px;
 height:250px;
 display:block;
 float:left;
 top:0;
}
.container .circle{
 position:absolute;
 left:0;
 right:0;
 margin:0 auto;
 background:rgba(0,0,0,.3);
 bottom:8px;
 border-radius:5px;
}
.container .circle p{
 width:8px;
 height:8px;
 background:#fff;
 border-radius:50%;
 float:left;
 margin:2px;
 cursor:pointer;
}
.container .circle p.select{
 background:#f40;
}
.container .direction .item{
 background:rgba(0,0,0,.4);
 position:absolute;
 top:120px;
 width:20px;
 height:26px;
 padding:2px;
 box-sizing:border-box;
 display:none;
 cursor:pointer;
}
.container .direction .item:hover{
 background:rgba(0,0,0,.5);
}
.container:hover .direction .item{
 display:block;
}
.container .direction .left{
 left:0;
 border-radius:0 15px 15px 0;
}
.container .direction .right{
 right:0;
 padding-left:6px;
 border-radius:15px 0 0 15px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
第一篇初识bootstrap
Jun 21 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
js实现上传按钮并显示缩略图小轮子
May 04 #Javascript
js代码实现轮播图
May 04 #Javascript
原生js实现轮播图特效
May 04 #Javascript
jquery实现手风琴案例
May 04 #jQuery
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 #Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 #Javascript
vue自定义标签和单页面多路由的实现代码
May 03 #Javascript
You might like
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
Mysql的常用命令
2006/10/09 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
php array_walk() 数组函数
2011/07/12 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
jquery $.ajax入门应用二
2008/11/19 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
Bootstrap基础学习
2015/06/16 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python 将pdf转成图片的方法
2018/04/23 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python request操作步骤及代码实例
2020/04/13 Python
python和php哪个容易学
2020/06/19 Python
Python内置函数property()如何使用
2020/09/01 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
中国梦口号
2014/06/13 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
尼克胡哲观后感
2015/06/08 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers