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 string字符串优化问题
Jul 31 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP goto语句用法实例
2019/08/06 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
实例讲解React 组件
2020/07/07 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python实现身份证号码解析
2015/09/01 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python绘制直线的方法
2018/06/30 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
python hashlib加密实现代码
2019/10/17 Python
python带参数打包exe及调用方式
2019/12/21 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
高中军训感想800字
2014/02/23 职场文书
英语教师求职信
2014/06/16 职场文书
居住证明范文
2015/06/17 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL