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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
html数组字符串拼接的最快方法
Sep 16 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
Vue数据绑定简析小结
May 07 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
详解CocosCreator项目结构机制
Apr 14 Javascript
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
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Angular实现的简单定时器功能示例
2017/12/28 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python实现Flappy Bird源码
2018/12/24 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python中怎么表示空值
2020/06/19 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
客服主管岗位职责
2013/12/13 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android