首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现轮播图特效

Posted in Javascript onMay 28, 2020

本文实例为大家分享了js实现轮播图特效的具体代码，供大家参考，具体内容如下

只需要修改图片的src即可

html:

<body>
 <div id="rollImgBox">
 <div class="photos clearfix">
  <!--轮播图里面首位多放最后一张与第一张图片，以便顺畅平滑切换-->
  <div class="move"><img src="img/timg%20(7).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(4).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(5).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(6).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(7).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(4).jpg" alt=""></div>
 </div>
 <!--points圆点导航,js动态生成-->
 <div class="points"></div>
 <!--如果需要向左与向右的按键，引入方向图片-->
 <span class="leftPoint"> < </span>
 <span class="rightPoint"> > </span>
 </div>
</body>

style:

*{
 margin: 0;
 padding: 0;
}
.clearfix{
 zoom: 1;
}
.clearfix:after{
 content: "";
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
}
#rollImgBox{
 /*这里让盒子居中，应用到具体页面删除即可*/
 margin: 20px auto;

 /*如果该轮播图不是独占一行，需要将其改为行内块元素*/
 display: block;
 position: relative;
 /*在这里设置装载图片的框框的宽高*/
 width: 947px;
 height: 585px;

 /*在这里设置边框的样式用outline，这样就不会影响到后面的js了
 /*加边框，用outline即可，不会影响实际的距离*/
 outline: 5px solid blue;
 overflow: hidden;
}
#rollImgBox .photos .move img{
 /*在这里设置图片的宽高，与边框的宽高相同*/
 width: 947px;
 height: 585px;
}
#rollImgBox .photos{
 position: relative;
 /*移动的是图片的宽度,左移947px*/
 left: -947px;
}
#rollImgBox:hover{
 cursor: pointer;
}
#rollImgBox .photos div{
 float: left;
}
#rollImgBox .points{
 position: absolute;
 /*在这里修改圆点导航的位置*/
 bottom: 30px;
 right: 170px;/*右下方*/
 text-align: center;
}
#rollImgBox .points span{
 display: inline-block;
 /*在这里可以更改圆点的大小*/
 text-align: center;
 line-height: 66px;
 font-size: 24px;
 font-family: 微软雅黑;
 width: 66px;
 height: 66px;
 background: rgba(112,117,112,.6);
 border-radius: 50%;
 margin-left: 15px;
}
#rollImgBox .points .pointsNow{
 background: rgba(62,255,49,.6);
}

/*左右按钮*/
#rollImgBox .leftPoint{
 width: 60px;
 height: 60px;
 background: rgba(0,0,0,.5);
 text-align: center;
 line-height: 60px;
 position: absolute;
 font-size: 30px;
 color: white;
 top: 290px;
 left: 0;
}
#rollImgBox .rightPoint{
 width: 60px;
 height: 60px;
 background: rgba(0,0,0,.5);
 text-align: center;
 line-height: 60px;
 position: absolute;
 font-size: 30px;
 color: white;
 top: 290px;
 right: 0;
}
#rollImgBox .leftPoint:hover{
 background: rgba(255,0,0,.5);
}
#rollImgBox .rightPoint:hover{
 background: rgba(255,0,0,.5);
}

script:

window.onload = function(){
 let rollImgBox = document.querySelector("#rollImgBox");
 let photos = document.querySelector("#rollImgBox .photos");
 let allimg = document.querySelectorAll("#rollImgBox .move img");
 let index = 2;
 //动态设计移动图片的框框宽高
 //(rollImgBox.offsetWidth)是要剪去边框的宽度
 photos.style.width = (allimg.length)*(rollImgBox.offsetWidth) + "px";
 photos.style.height = rollImgBox.offsetHeight + "px";
 //动态创建小圆点
 let point = new Array();
 let points = document.querySelector("#rollImgBox .points");
 for (let i=0;i<(allimg.length-2);i++){
 point[i] = document.createElement("span");
 point[i].innerHTML = (i+1);
 points.appendChild(point[i]);
 }
 point[0].className = "pointsNow";

 let rollImgIterval = setInterval(function () {
 //图片的轮播
 if (index === allimg.length){
  photos.style.left = 0;
  index = 1;
  photos.style.transition = "0s";
  point[0].className = "pointsNow";
 } else {
  photos.style.transition = "1.5s";
 }
 photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
 index++;
 //小圆点的变换
 for (let j=0;j<(allimg.length-2);j++){
  if (j === index-2){
  point[j].className = "pointsNow";
  } else {
  point[j].className = "";
  }
 }
 //这里是最后一张图片（与展现的第一张一样的图）设置小圆点样式
 if (index === allimg.length){
  point[0].className = "pointsNow";
 }
 },2000);

 //当用户把鼠标放到rollImgBox盒子中，需要查看图片，自动轮播停止
 rollImgBox.onmouseover = function () {
 clearInterval(rollImgIterval);
 };
 rollImgBox.onmouseout = function () {
 rollImgIterval = setInterval(function () {
  //图片的轮播
  if (index === allimg.length){
  photos.style.left = 0;
  index = 1;
  photos.style.transition = "0s";
  point[0].className = "pointsNow";
  } else {
  photos.style.transition = "1.5s";
  }
  photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
  index++;
  //小圆点的变换
  for (let j=0;j<(allimg.length-2);j++){
  if (j === index-2){
   point[j].className = "pointsNow";
  } else {
   point[j].className = "";
  }
  }
  //这里是最后一张图片（与展现的第一张一样的图）设置小圆点样式
  if (index === allimg.length){
  point[0].className = "pointsNow";
  }
 },2000);
 };

 //点击小圆点，跳转到对应的图片位置
 for (let k=0;k<(allimg.length-2);k++){
 point[k].onmousedown = function () {
  photos.style.left = -(rollImgBox.offsetWidth)*(k+1) + "px";
  //小圆点的变换
  for (let j=0;j<(allimg.length-2);j++){
  if (j === k){
   point[j].className = "pointsNow";
  } else {
   point[j].className = "";
  }
  }
  //点击小圆点之后更改index的值
  index = k+2;
 }
 }

 //点击左右方向键，对图片进行滑动
 let leftPoint = document.querySelector('#rollImgBox .leftPoint');
 let rightPoint = document.querySelector('#rollImgBox .rightPoint');
 leftPoint.onclick = function () {
 photos.style.transition = "1s";
 //向左滑动一张图片，并修改index的值（index--）
 let dis = index-2;
 //当dis为1时，圆点到达第一个位置，如果再往左移动一个，圆点应该到达最后一个位置
 if (dis < 1){
  dis = allimg.length-2;
  photos.style.left = 0;
  point[dis-1].className = "pointsNow";
  point[0].className = "";
  index = allimg.length;
 } else {
  photos.style.left = -(rollImgBox.offsetWidth)*dis + "px";
  point[dis-1].className = "pointsNow";
  point[dis].className = "";
 }

 //从第一张顺滑切换到最后一张
 setTimeout(function () {
  if (photos.style.left === '0px'){
  photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-2) + "px";
  photos.style.transition = '0s';
  index = allimg.length-1;
  }
 },1000);
 index--;
 };
 rightPoint.onclick = function () {
 photos.style.transition = "1s";
 //向右滑动一张图片，并修改index的值（index++）
 let dis = index-1;
 //当dis为5时，圆点到达最后一个位置，如果再往右移动一个，圆点应该到达第一个位置
 if (dis >= (allimg.length-2)){
  photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-1) + "px";
  point[0].className = "pointsNow";
  point[allimg.length-3].className = "";
  index = 1;
 } else {
  photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
  point[dis].className = "pointsNow";
  point[dis-1].className = "";
 }

 //从最后一张顺滑切换到第一张
 setTimeout(function () {
  if (photos.style.left === ((-(rollImgBox.offsetWidth)*(allimg.length-1))+'px')){
  photos.style.left = -(rollImgBox.offsetWidth) + "px";
  photos.style.transition = '0s';
  index = 2;
  }
 },1000);
 index++;
 };
};

更多关于轮播图效果的专题，请点击下方链接查看学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木，大家继续关注更多精彩焦点轮播图。

js实现轮播图特效

- Author -

阿布的小布

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery的拖动布局插件
Nov 25 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
JS写滑稽笑脸运动效果
May 28 #Javascript
Python版实现微信公众号扫码登陆
May 28 #Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 #Javascript
原生js实现五子棋游戏
May 28 #Javascript
Vue微信公众号网页分享的示例代码
May 28 #Javascript
纯JS实现五子棋游戏
May 28 #Javascript
js实现简单五子棋游戏
May 28 #Javascript
CPU(2) ICF-F10(1) 德生1994(1) AE3805(1) 爱尔兰购物网站(30) SLi Minor 2020(63) 德生G88(1) 天梯图(1) 香港购物网站(84) 纸巾盒(1)
You might like
PHP中strtotime函数使用方法分享
2012/01/10 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
python之import机制详解
2014/07/03 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python正则表达式面试题解答
2020/04/28 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python采集微信公众号文章
2018/12/20 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
利用python实现AR教程
2019/11/20 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
了解一下python内建模块collections
2020/09/07 Python
总裁助理岗位职责
2014/02/17 职场文书
财务总监岗位职责
2015/02/03 职场文书
中秋节寄语2015
2015/03/24 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
MySQL触发器的使用
2021/05/24 MySQL