Using native javascript to implement carousel map
- 2021-07-24 09:21:20
- OfStack
Let's look at the implementation code of js carousel diagram. The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: ' Blackbody ';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
function $(element) {
return document.getElementById(element);
}
var box = $("box");
var screen = box.children[0];
var ul = screen.children[0];
var ulLis = ul.children;
var ol = screen.children[1];
var arr = $("arr");
var left = $("left");
var right = $("right");
// Create small icons dynamically
for (var i = 0; i < ulLis.length; i++) {
var li = document.createElement("li");
li.innerHTML = i + 1;
ol.appendChild(li);
}
// Set these small icons
var olLis = ol.children;
var imgWidth = screen.offsetWidth;
for (var j = 0; j < olLis.length; j++) {
olLis[j].index = j;
olLis[j].onmouseover = function () {
// Exclusive thought
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
this.className = "current";
var target = -imgWidth * this.index;
cutton(ul, target, 20);
// In order to enable click events and small icons of facets to 11 Corresponding, set their index values to be the same
pic = square = this.index;
}
}
// Set small icons 1 Initial styles
ol.children[0].className = "current";
// To ul Append 1 Map
ul.appendChild(ul.children[0].cloneNode(true));
// Set the display and hiding of arrows
box.onmouseover = function () {
arr.style.display = "block";
// When the mouse is put up, it will no longer scroll automatically
clearInterval(timer);
}
box.onmouseout = function () {
arr.style.display = "none";
// When the mouse leaves, continue to scroll automatically
timer = setInterval(playNext, 1000);
}
// Set the event of clicking the left and right small arrows and ask the small icons to change accordingly
//1. Set to click the right arrow
var pic = 0;// Record which item is currently used
var square = 0;// Record the index value of small icons
/* right.onclick = function () {// The problem is that when moving to the end, 1 When Zhang, he can't jump to the first 1 Zhang
pic++;
var target = -pic * imgWidth;
cutton(ul, target, 20);
}*/
// Method improvement
/*right.onclick = function () {
// Right first pic Do 1 A judgment, when pic The value of is 5 Realize the 1 A jump
if (pic == ulLis.length - 1) {
ul.style.left = 0;
pic = 0;
}
pic++;
var target = -pic * imgWidth;
cutton(ul, target, 20);
if (square == olLis.length - 1) {
square = -1;// Will be added below 1 , it becomes 0
}
square++;
// Exclusive thought
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}*/
// Using encapsulated functions
right.onclick = function () {
playNext();
}
//2. Set to click the left arrow
left.onclick = function () {// To judge 1 Believe in pic The situation when it is zero
if (pic == 0) {
ul.style.left = -imgWidth * (ulLis.length - 1) + "px";// Remember to add units
pic = ulLis.length - 1;// To pic Re-Fu 1 Values
}
pic--;
var target = -pic * imgWidth;
cutton(ul, target, 20);
// Set small icon style
if (square == 0) {
square = olLis.length;
}
square--;
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}
// Set up automatic scrolling
//1. Encapsulate the small arrow event on the right side
function playNext() {
// Right first pic Do 1 A judgment, when pic The value of is 5 Realize the 1 A jump
if (pic == ulLis.length - 1) {
ul.style.left = 0;
pic = 0;
}
pic++;
var target = -pic * imgWidth;
cutton(ul, target, 20);
if (square == olLis.length - 1) {
square = -1;// Will be added below 1 , it becomes 0
}
square++;
// Exclusive thought
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";
}
//2. Call this encapsulated function and set the 1 Intermittent timer
var timer = null;
timer = setInterval(playNext, 1000);
// Encapsulated function
function cutton(obj, target, stp) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = stp;
step = obj.offsetLeft > target ? -step : step;
if (Math.abs(obj.offsetLeft - target) >= Math.abs(step)) {
obj.style.left = obj.offsetLeft + step + "px";
} else {
obj.style.left = target + "px";
clearInterval(obj.timer);
}
}, 15)
}
</script>
</body>
</html>Supplement: Native javascript realizes automatic carousel switching of banner diagram
jquery is used when doing banner carousel, because the code is less and convenient, and it doesn't take a long time to get a certain element as a variable, and then operate, as long as 1 $is done. But today I used the original javascript to do 1 under this carousel effect, feeling OK, the following is part of js source code, for reference only! View the effect demonstration at the bottom of the article.
1. Leave the mouse from the banner diagram and switch once every 2s;
2. Slide the mouse over the small button below to switch pictures;
3. Click the left and right buttons with the mouse to switch pictures.
var oPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;
window.onload = function(){
oPic = document.getElementsByClassName("pic")[0];
oLi = oPic.getElementsByTagName("li");
anniu = document.getElementsByClassName("anniu")[0];
aLi = anniu.getElementsByTagName("li");
aLength = aLi.length;
num = 0;
oG = document.getElementsByClassName("g")[0];
oSpan = oG.getElementsByTagName("span");
oLeft = oSpan[0];
oRight = oSpan[1];
start();
oG.onmouseover = end;
oG.onmouseout = start;
for(var j=0; j<aLength; j++){
aLi[j].index = j;
aLi[j].onmouseover = change;
}
oRight.onclick = time;
oLeft.onclick = times;
}
// Automatic carousel starts or ends
function start(){
timer = setInterval(time,2000);
hide();
}
function end(){
clearInterval(timer);
show();
}
// Picture switching ++
function time(){
for(var i=0; i<aLength; i++){
oLi[i].style.display = "none";
aLi[i].className = "";
}
num++;
num = num % 4;
oLi[num].style.display = "block";
aLi[num].className = "on";
}
// Picture switching --
function times(){
for(var i=0; i<aLength; i++){
oLi[i].style.display = "none";
aLi[i].className = "";
}
num--;
num = (num+4)%4;
oLi[num].style.display = "block";
aLi[num].className = "on";
}
// Slide the mouse over the button, and the picture will be broadcast in turn
function change(){
_index = this.index;
for(var k=0; k<aLength; k++){
aLi[k].className = "";
oLi[k].style.display = "none";
}
aLi[_index].className = "on";
oLi[_index].style.display = "block";
}
// Left and right buttons show or hide
function show(){
oSpan[0].style.display = "block";
oSpan[1].style.display = "block";
}
function hide(){
oSpan[0].style.display = "none";
oSpan[1].style.display = "none";
}