首页
所有分类
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 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
解决iView Table组件宽度只变大不变小的问题
Nov 13 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
遗弃(1) 艾尔登法环(1) 暴雪(1) 小缇娜的奇幻之地(1) 巫师(1) 最终幻想(1) 东方异文石(1) LOL(1) 我的世界(1) 战锤40K(1)
You might like
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
php短信接口代码
2016/05/13 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
jquery对表单操作2
2011/04/06 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
JavaScript快速调试的两个技巧
2020/11/04 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python占位符输入方式实例
2019/05/27 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
三星印度官网：Samsung印度
2019/08/03 全球购物
《诚实与信任》教学反思
2014/04/10 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
实践单位评语
2014/04/26 职场文书
公司周年庆典标语
2014/10/07 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
写给同事的离职感言
2015/08/04 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫