Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to realize the round broadcast map in JavaScript". In the daily operation, I believe that many people have doubts about how to realize the round broadcast map in JavaScript. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize the round broadcast map in JavaScript". Next, please follow the editor to study!

The html and css codes are as follows (file name: index.html)

Document body {background-color: rgb (151,147,147);} * {margin: 0; padding: 0;} div {overflow: hidden; position: relative; width: 500px; height: 500px; background-color: skyblue Margin: 20px auto;} ul {list-style: none;} .img {width: 600%; position: absolute; left: 0;} li {float: left;} img {width: 500px; height: 500px Yuan > li {cursor: pointer; width: 10px; height: 10px; background-color: rgb (190,185,185); border-radius: 50%; margin: 05px; border: 1px solid rgb (119,114,114);} .yuan {position: absolute Bottom: 10px; left: 50%; transform: translateX (- 50%);} .yuan .color {background-color: rgb (228,135,135);} a {text-decoration: none; color: black; background-color: rgb (112,111,111) Display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; position: absolute; top: 50%; transform: translateY (- 50%); display: none;} .left {left: 0 } .right {right: 0;}

After it is written in this way, a basic appearance can be regarded as having.

The next is to let him move, think about what can make the picture move, is not the animation effect we have learned, all this place to use slow animation to achieve a switch picture effect, because there is a lot of js code, so we have to create a new js file, encapsulate the code!

The following is the packaged js code (file name: broadcast picture .js)

Window.addEventListener ('load', function () {var img = document.querySelector (' .img'); var yuan = document.querySelector ('.yuan'); var box = document.querySelector ('.box'); var left = document.querySelector ('.left'); var right = document.querySelector ('.right'); var imgwidth = box.offsetWidth / / get the width of the box (width of the picture) / / stop automatically scrolling the picture after the mouse is triggered box.addEventListener ('mouseenter', function () {left.style.display =' block'; right.style.display = 'block'; clearInterval (timer)) }) / / leave the mouse to trigger automatic scrolling of the picture again trigger box.addEventListener ('mouseleave', function () {left.style.display =' none'; right.style.display = 'none'; timer = setInterval (function () {right.click ();}, 2000)}) / / add the following dot for (var I = 0) according to the picture I

< img.children.length; i++) { var li = document.createElement('li'); yuan.appendChild(li); li.setAttribute('date-index', i); li.addEventListener('click', function () { for (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } this.className = 'color'; var index = this.getAttribute('date-index'); var imgwidth = box.offsetWidth; // animate(obj,target,function(){}) animate(img, -index * imgwidth); nums = index; colors = index; }) } // 默认第一个小圆点有颜色 yuan.children[0].className = 'color'; var nums = 0; var colors = 0; // 复制第一张图片到最后,给无缝滚动做准备 var li = img.children[0].cloneNode(true); img.appendChild(li); var flag = true; //右边按钮,切换下一张,小圆点一起变化 right.addEventListener('click', function () { if (flag) { flag = false; if (nums == img.children.length - 1) { nums = 0; img.style.left = 0; } nums++; animate(img, -nums * imgwidth, function () { flag = true; }); colors++; if (colors == yuan.children.length) { colors = 0; } for (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } yuan.children[colors].className = 'color'; } }) // 左边按钮,切换下一张,小圆点一起变化 left.addEventListener('click', function () { if (flag) { flag = false; if (nums == 0) { nums = img.children.length - 1; img.style.left = -nums * imgwidth + 'px'; } nums--; colors--; animate(img, -nums * imgwidth, function () { flag = true; }); if (colors < 0) { colors = yuan.children.length - 1; } // if (colors == 0) { // colors = yuan.children.length; // } // colors--; for (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } yuan.children[colors].className = 'color'; } }) // 鼠标不经过图片实现自动滚动 var timer = setInterval(function () { right.click(); }, 2000)}) 关键的来了，要让动起来怎么少得了动画效果呢，我单独封装了一个 js 文件，这样以后写其他案例的时候也可以直接引用了。 代码如下（文件名：animate.js） function animate(obj, target, callback) { //移动的对象(谁移动)，移动的目的位置，回调函数 // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { // 步长写到定时器里面 var step = (target - obj.offsetLeft) / 10; //步长公式：(目标位置-现在的位置)/10 step = step >

0? Math.ceil (step): Math.floor (step); / / the step size is changed to an integer without decimals, positive numbers rounding up, negative numbers rounding down if (obj.offsetLeft = = target) {clearInterval (obj.timer) / / stop the animation, essentially stopping the timer if (callback) {callback () / / the callback function writes to the end of the timer}} / / step size as a slowly decreasing value to achieve the slow stop effect from fast to slow obj.style.left = obj.offsetLeft + step + 'px';}, 15)} so far, the study on "how to implement the JavaScript carousel graph" is over. I hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.