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小实验之函数引用
Nov 17 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
bootstrap table实例详解
Jan 06 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
jquery css实现流程进度条
Mar 26 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
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
浅析Python的Django框架中的Memcached
2015/07/23 Python
浅析使用Python操作文件
2017/07/31 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
毕业生自荐信的主要内容
2013/10/29 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
初中家长评语和期望
2014/12/26 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Nginx源码编译安装过程记录
2021/11/17 Servers
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
Django框架中表单的用法
2022/06/10 Python