三种js轮播实现方式详解（看一遍就会）

js轮播的三种实现方式

1、替换scr(入门级)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.wrapper{width: 600px;height: 350px;margin: 0 auto;position: relative;}img{width: 100%;height: 100%;}.btn{width:150px;display: flex;justify-content: space-around;position: absolute;left:225px;bottom:10px;}.btn span{display: block;width:15px;height:15px;border: 3px solid white;border-radius: 50%;}.active{background-color: red;}</style></head><body><div class="wrapper"><img src="./imgs/1.png" alt=""><div class="btn"><span class="active"></span><span></span><span></span><span></span><span></span></div></div><script>var _img=document.querySelector("img");var _wrapper=document.querySelector(".wrapper");var _spots=document.querySelectorAll(".btn span");var imgs=['./imgs/1.png','./imgs/2.png','./imgs/3.png','./imgs/4.png','./imgs/5.png']//自动播放autoplay();var id;var index=1;function autoplay(){id=setInterval(function(){_img.src=imgs[index];//控制小圆点spots();index++;if(index>=5){index=0;}},2000)}//小圆点变化function spots(){for (var i = 0; i < _spots.length; i++) {if(i==index){_spots[i].className="active"}else{_spots[i].className=""}}}//悬浮时停止_wrapper.onmouseover=function(){clearInterval(id);}//离开时继续_wrapper.onmouseout=function(){autoplay();}</script></body>
</html>

效果图:

2、滚动条（进阶版）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.wrapper {width: 900px;height: 350px;overflow: hidden;overflow: auto;margin: 0 auto;}img {width: 900px;height: 350px;}.contain {display: flex;width: 5400px;}</style>
</head><body><div class="wrapper"><div class="contain"><img src="./img/10011.jpg" /><img src="./img/10012.jpg" /><img src="./img/10013.jpg" /><img src="./img/10014.jpg" /><img src="./img/10015.jpg" /><img src="./img/10011.jpg" /></div></div><script>var _wrapper = document.querySelector(".wrapper");var index = 0;var num = setInterval(function () {//滚动一张var moveLength = 0; //用标识是否走完一张var id = setInterval(function () {_wrapper.scrollLeft += 12;moveLength += 12if (moveLength >= 900) {clearInterval(id);}}, 20) //一张需要2250毫秒index++;// 走完所有下标和滚动都要从0开始if (index >= 6) {index = 0;_wrapper.scrollLeft = 0;}}, 3000)</script>
</body></html>

效果图：

3、定位（豪华版）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.wrapper {width: 900px;height: 350px;overflow: hidden;margin: 0 auto;position: relative;}img {width: 900px;height: 350px;}.contain {display: flex;width: 4500px;position: absolute;left: 0;top: 0;}.btn {width: 150px;display: flex;justify-content: space-around;position: absolute;left: 375px;bottom: 10px;}.btn span {display: block;width: 15px;height: 15px;border: 3px solid white;border-radius: 50%;}.wrapper a {text-decoration: none;font-size: 50px;color: red;position: absolute;top: 35%;}.wrapper a:nth-of-type(1) {left: 10px;}.wrapper a:nth-of-type(2) {right: 10px;}.active {background-color: red;}</style>
</head><body><div class="wrapper"><div class="contain"><img src="./img/10011.jpg" /><img src="./img/10012.jpg" /><img src="./img/10013.jpg" /><img src="./img/10014.jpg" /><img src="./img/10015.jpg" /></div><div class="btn"><span class="active"></span><span></span><span></span><span></span><span></span></div><a href="javascript:void(0);">&lt;</a><a href="javascript:void(0);">&gt;</a></div><script>var _wrapper = document.querySelector(".wrapper");var _contain = document.querySelector(".contain");var _btn = document.querySelector(".btn");//下一张按钮var _nextPic = document.querySelector(".wrapper a:nth-of-type(2)");// 上一张按钮var _prevPic = document.querySelector(".wrapper a:nth-of-type(1)");var _btn = document.querySelector(".btn");//获取所有小圆点var _spots = document.querySelectorAll(".btn span");// 下一张_nextPic.onclick = function () {next_pic();}var index = 0;function next_pic() {_contain.style.left = _contain.offsetLeft - 900 + "px";if (_contain.offsetLeft <= -4500) {_contain.style.left = 0;}index++;if (index > 4) {index = 0;}spots();}// 上一张_prevPic.onclick = function () {prev_pic();}function prev_pic() {_contain.style.left = _contain.offsetLeft + 600 + "px";if (_contain.offsetLeft > 0) {_contain.style.left = -3600 + "px";}index--;if (index < 0) {index = 4;}spots();}//自动轮播autoplay();var id;function autoplay() {id = setInterval(function () {next_pic();}, 2000)}//小圆点变化function spots() {for (var i = 0; i < _spots.length; i++) {if (i == index) {_spots[i].className = "active"} else {_spots[i].className = ""}}}//悬停控制_wrapper.onmouseover = function () {clearInterval(id);}_wrapper.onmouseout = function () {autoplay();}//悬浮小圆点更新图片_btn.onmouseover = function (event) {//获取悬浮的小圆点var target = event.srcElement || event.target;if (target.nodeName == 'SPAN') {//查询小圆点下标var n = Array.from(_spots).findIndex(function (tag) {return tag == target})//更新下标index = n;//更新位移_contain.style.left = -900 * n + "px";//更新颜色spots();}}</script>
</body></html>

效果图：

三种js轮播实现方式详解（看一遍就会）相关推荐

Vue.js轮播图走马灯 (详解)
直接上代码: 轮播图1: html <template><div><div class="back_add"><div class=&qu ...
制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...
vue 实现无限轮播_使用Vue制作图片轮播组件思路详解
之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也 ...
bootstrap轮播图代码详解
最近在做个人简历网站,然后要用到轮播图,上网查了一下,以下为轮播图代码: 下面展示一些内联代码片.  <div id="my ...
三种Cross-lingual模型 (XLM, XLM-R, mBART)详解
本文将详述三种Cross-lingual模型,按照其在Arxiv上发表论文的时间,分别是XLM(2019/1/22).XLM-R(2019/11/5).mBART(2020/1/22),有意思的是这三 ...
jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码  <div class="wrap" ...
三种CDN调度系统实现原理详解
1. 调度系统是什么? 调度系统是指CDN厂家有能力通过各种机制将客户域名的所有现网请求引导到合适的目标机房,从而实现流量控制.质量控制.成本控制以及故障处理. 2. 接入CDN的方式在讲解调度原理 ...
vue axios全局封装请求和 vue三种js跳转页面方式
axios全局封装请求第一步在src文件下新建api文件文件下新建request.js文件 // 导入axios import axios from "axios"; // 进 ...
js继承的六种方式详解--认真看完你就会了
今天主要来研究一下继承这个东西继承共分为六种继承方式: 原型链继承盗用构造函数继承组合继承实例继承(原型式继承) 寄生式继承寄生式组合继承原型链继承原型链继承是ES主要继承方法,其中 ...

三种js轮播实现方式详解（看一遍就会）

js轮播的三种实现方式

1、替换scr(入门级)

2、滚动条（进阶版）

3、定位（豪华版）

三种js轮播实现方式详解（看一遍就会）相关推荐

最新文章

热门文章