js realizes cool left and right carousel pictures
- 2021-07-12 04:44:59
- OfStack
In this paper, we share the specific codes of js carousel for your reference. The specific contents are as follows
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta keyword=" Left and right carousel map - The effect is better ">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div class="w-slider" id="js_slider">
<div class="slider">
<div class="slider-main" id="slider_main">
<div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div>
</div>
</div>
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-prev"></span>
<!-- <span class="slider-ctrl-con current"></span>
<span class="slider-ctrl-con"></span>
<span class="slider-ctrl-con"></span>
<span class="slider-ctrl-con"></span>
<span class="slider-ctrl-con"></span>
<span class="slider-ctrl-con"></span> -->
<span class="slider-ctrl-next"></span>
</div>
</div>
<script>
</script>
</body>
</html>
Main css code:
.w-slider{
width: 310px;
height: 265px;
background-color: pink;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider{
width: 310px;
height: 220px;
}
.slider-main{
width: 620px; /* Width of two pictures */
height: 310px;
}
.slider-main img{
vertical-align: top; /* Eliminate the top and bottom of the picture 3px Gap of */
}
.slider-main-img{
position: absolute;
top: 0;
left: 0;
}
.slider-ctrl{
text-align:center;
padding-top: 8px;
}
.slider-ctrl-con{
display: inline-block;
width: 24px;
height: 20px;
background-color: blue;
margin: 0 5px;
background: url(../images/icon.png) no-repeat -24px -782px;
cursor: pointer;
text-indent: -20em; /* In order to put span The label of is hidden */
overflow: hidden;
}
.slider-ctrl .current{
background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
position: absolute;
top: 50%;
margin-top: -35px;
display: inline-block;
width: 30px;
height: 35px;
background: url(../images/icon.png) no-repeat 6px top;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-prev{
left: 0;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -44px;
}
Main js code (slider. js):
window.onload = function(){
function $(id){ return document.getElementById(id);}
var js_slider = $("js_slider");
var slider_main = $("slider_main"); // Gets the parent box of the carousel picture
var imgs = slider_main.children; // Get a picture group
var slider_ctrl = $("slider_ctrl"); // Object of the control Parent box
// A that controls carousel span
for(var i = 0; i< imgs.length; i++){
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = imgs.length - i;
slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
}
var spans = slider_ctrl.children;
spans[1].setAttribute("class","slider-ctrl-con current"); // Set the 1 A span Increase current Style
// Layout picture, number 1 Zhang is in the correct position and the rest are on the right
var scrollWidth = js_slider.clientWidth; // Gets the width of the big box, which is the distance the animation goes behind it
for(var i=1; i<imgs.length; i++){ // No. 1 1 The picture is in the correct position
imgs[i].style.left = scrollWidth + "px"; // The rest of the pictures are in 310px Location of
}
// Traversal 3 Buttons -- Left, right and bottom span
var iNow = 0; // Sets the index number of the currently displayed picture
for(var k in spans){ //k Is the index number
spans[k].onclick = function(){
if(this.className == "slider-ctrl-prev"){
// The current picture moves to the right from 0 -> 310px )
animate(imgs[iNow],{left: scrollWidth});
iNow = --iNow < 0 ? imgs.length-1 : iNow;
imgs[iNow].style.left = -scrollWidth + "px";// Quick execution, which will be displayed 1 The page immediately goes to the left and displays
animate(imgs[iNow],{left:0}); // Under 1 Move the picture to the right from -310px->0
setSquare();
}else if(this.className == "slider-ctrl-next"){
// The current picture moves left from 0 -> -310px )
animate(imgs[iNow],{left: -scrollWidth});
iNow = (++iNow) % imgs.length;
imgs[iNow].style.left = scrollWidth + "px";// Quick execution, which will be displayed 1 The page immediately goes to the right and then moves to the left to display
animate(imgs[iNow],{left:0}); // Under 1 Move the picture to the left from 310px->0
setSquare();
// Or reduced to a function
/*autoPlay();*/
}else{
/*alert(" Click on the following span");*/
var clickIndex = this.innerHTML - 1;
if(clickIndex > iNow){
// The practice is equivalent to the right button
animate(imgs[iNow],{left: -scrollWidth});
imgs[clickIndex].style.left = scrollWidth + "px";// Quick execution, which will be displayed 1 The page immediately goes to the right and then moves to the left to display
}else if(clickIndex < iNow){
// The practice is equivalent to the left side
animate(imgs[iNow],{left: scrollWidth});
imgs[clickIndex].style.left = -scrollWidth + "px";// Quick execution, which will be displayed 1 The page immediately goes to the left and displays
}
iNow = clickIndex;
animate(imgs[iNow],{left:0});
setSquare();
}
}
}
// Control span The style of small squares Function
function setSquare(){
// Below span Style is emptied, and the iNow Set to current Note that it is the following span Does not include left and right control buttons
for(var i=1; i<spans.length-1; i++){
spans[i].className = "slider-ctrl-con";
}
spans[iNow+1].className = "slider-ctrl-con current"; // Attention iNow Is the index number, to add 1
}
// Set the timer , and right button function 1 To
var timer =null;
timer = setInterval(autoPlay,2000);
function autoPlay(){
animate(imgs[iNow],{left: -scrollWidth});
iNow = (++iNow) % imgs.length;
imgs[iNow].style.left = scrollWidth + "px";// Quick execution, which will be displayed 1 The page immediately goes to the right and then moves to the left to display
animate(imgs[iNow],{left:0}); // Under 1 Move the picture to the left from 310px->0
setSquare();
}
// Clear timer
js_slider.onmouseover = function(){
clearInterval(timer);
}
// Start the timer
js_slider.onmouseout = function(){
clearInterval(timer); // To execute the timer, clear the timer first
timer = setInterval(autoPlay,2000);
}
}
Slow animation js code: (animate. js)
// Returns the current style
function getStyle(obj,attr){ //obj Object, attr Attribute name
if(obj.currentStyle){ //ie Etc
return obj.currentStyle[attr];
}else{ //w3c
return window.getComputedStyle(obj,null)[attr];
}
}
function animate(obj,json,fn) { // To whom json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // Used to judge whether to stop the timer 1 Definitely write to the outside of traversal
for(var attr in json){ // attr Attribute json[attr] Value
// Start traversing json
// Calculating step Use target Position Subtract the current position Divide by 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; // User does not define opacity Is returned undefined
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // Numeric value, removing the style " px "
}
// console.log(current);
// The target location is Attribute value
var step = ( json[attr] - current) / 10; // Step length Use the target position - Present position / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// Transparency of judgment
if(attr == "opacity") // Judge whether the user has input or not opacity
{
if("opacity" in obj.style) // Judge Does our browser support opacity
{
// obj.style.opacity , // Support opacity-----opacity:0.3
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr]) // As long as one of them 1 Unsatisfied conditions You shouldn't stop the timer This sentence 1 Definite traversal inside
{
flag = false;
}
}
if(flag) // Conditions for judging timers
{
clearInterval(obj.timer);
//alert("ok It's over ");
if(fn) // It's very simple When the timer stops. The animation is over If there is a callback, it should be executed
{
fn(); // Function name + () Call function Execute function For the time being, replace it like this
}
}
},30)
}