首页
所有分类
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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
javascript元素动态创建实现方法
May 13 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
js实现图片放大展示效果
Aug 30 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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
BOSE(2) 收信机(3) 摩托罗拉(1) 晶体管(2) 66-XI(1) 沃尔沃(1) 军机(1) 77A(2) MOTOROLA(1) VOLVO(1)
You might like
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
php过滤所有的空白字符（空格、全角空格、换行等）
2015/10/27 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
php微信开发之谷歌测距
2018/06/14 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
Express URL跳转（重定向）的实现方法
2017/04/07 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
Python决策树分类算法学习
2017/12/22 Python
Python微信公众号开发平台
2018/01/25 Python
python监控文件并且发送告警邮件
2018/06/21 Python
python爬取微信公众号文章
2018/08/31 Python
django表单的Widgets使用详解
2019/07/22 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
pandas中ix的使用详细讲解
2020/03/09 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
工作表现评语
2014/01/19 职场文书
毕业自我评价
2014/02/05 职场文书
科技节口号
2014/06/19 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android