Responsive picture carousel -- JavaScript writing

Here we will introduce a set of components of a responsive image carousel written in JavaScript. First look at the UI of the overall page:

The specific functions are as follows: 1. When one of the four pictures below the yellow border is located, the large picture above will show the picture where the yellow border is located;

2. When clicking the leftmost figure at the bottom, scroll a figure to the left, and change the yellow mark of the large figure and the small figure. Click the rightmost figure similar to the above;

3. Click the left arrow, scroll a picture to the left, change the yellow mark of the big picture and the small picture, and click the rightmost arrow similar to the above;

See code explanation for details

1, Motion frame

The small image below the image carousel realizes the rolling of the image, so the js motion framework is introduced here:

move.js

function getStyle(obj, name)

{

    if(obj.currentStyle)

    {

        return obj.currentStyle[name];

    }

    else

    {

        return getComputedStyle(obj, false)[name];

    }

}

 

function startMove(obj, attr, iTarget,spee)

{

    clearInterval(obj.timer);

    obj.timer=setInterval(function (){

        var cur=0;

        

        if(attr=='opacity')

        {

            cur=Math.round(parseFloat(getStyle(obj, attr))*100);

        }

        else

        {

            cur=parseInt(getStyle(obj, attr));

        }

        

        var speed=(iTarget-cur)/spee;

        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        

        if(cur==iTarget)

        {

            clearInterval(obj.timer);

        }

        else

        {

            if(attr=='opacity')

            {

                obj.style.filter='alpha(opacity:'+(cur+speed)+')';

                obj.style.opacity=(cur+speed)/100;

            }

            else

            {

                obj.style[attr]=cur+speed+'px';

            }

        }

    }, 30);

}

 

2. Layout: Here I choose six pictures, which can be increased or decreased at will.

<style>

* {

padding: 0;

margin: 0;

}

 

.picture-show {

width: 540px;

height: 516px;

margin: 50px auto;

/* overflow: hidden; */

}

 

.big-picture {

height: 405px;

width: 540px;

}

.small-picture {

height: 94px;

overflow: hidden;

margin-top: 16px;

position: relative;

}

 

.small-prev {

height: 90px;

width: 21px;

background-color: #dadada;

cursor: pointer;

position: absolute;

top: 2px;

text-align: center;

display: inline-block;

}

 

.small-prev i {

color: white;

width: 9px;

height: 14px;

display: inline-block;

margin-top: 37px;

text-align: center;

}

 

.small-con {

position: absolute;

width: 502px;

height: 94px;

overflow: hidden;

top: 0;

left: 19px;

display: inline-block;

}

 

.small-con ul {

width: 882px;

height: 686px;

position: absolute;

}

 

.small-con li {

width: 124px;

height: 98px;

list-style: none;

cursor: pointer;

margin-right: 2px;

float: left;

padding: 2px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

 

.small-con img {

width: 120px;

height: 90px;

}

 

.small-next {

height: 90px;

width: 21px;

background-color: #dadada;

cursor: pointer;

position: absolute;

top: 2px;

text-align: center;

display: inline-block;

right: 0;

}

 

.small-next i {

color: white;

width: 9px;

height: 14px;

display: inline-block;

margin-top: 37px;

text-align: center;

position: absolute;

right: 8px;

}

 

.cur {

background: #fbc700;

}

</style>

</head>

 

<body>

<div class="picture-show">

<div class="big-picture" id="big-picture">

<a href="javascript:" class="bigshow">

<img src="home1.jpg" alt="" height="405px" width="540px">

</a>

<a class="bigshow" href="javascript:" style="display: none">

<img src="home2.jpg" alt="" height="405px" width="540px">

</a>

<a class="bigshow" href="javascript:" style="display: none">

<img src="home3.jpg" alt="" height="405px" width="540px">

</a>

<a class="bigshow" href="javascript:" style="display: none">

<img src="home4.jpg" alt="" height="405px" width="540px">

</a>

<a class="bigshow" href="javascript:" style="display: none">

<img src="home5.jpg" alt="" height="405px" width="540px">

</a>

<a class="bigshow" href="javascript:" style="display: none">

<img src="home6.jpg" alt="" height="405px" width="540px">

</a>

<a class="bigshow" href="javascript:" style="display: none" >

<img src="home7.jpg" alt="" height="405px" width="540px">

</a>

</div>

<div class="small-picture">

<div class="small-prev" id="small-prev">

<i class="glyphicon glyphicon-chevron-left"></i>

</div>

<div class="small-con">

<ul id="ul">

<li class="cur">

<p><img src="home1.jpg" alt=""></p></li>

<li><p><img src="home2.jpg" alt=""></p></li>

<li><p><img src="home3.jpg" alt=""></p></li>

<li><p><img src="home4.jpg" alt=""></p></li>

<li><p><img src="home5.jpg" alt=""></p></li>

<li><p> <img src="home6.jpg" alt=""></p></li>

<li><p><img src="home7.jpg" alt=""></p></li>

</ul>

</div>

<div class="small-next" id="small-next">

<i class="glyphicon glyphicon-chevron-right"></i>

</div>

 

3.js code: see the comments for details.

<script>

window.onload = function () {

var oul = document.getElementById('ul');

var ali = oul.getElementsByTagName('li');

var bigp=document.getElementById('big-picture');

var aa=bigp.getElementsByTagName('a');

//Click to display the large image and change the focus of the small image

for(var i=0;i<ali.length;i++){

ali[i].value=i;

ali[i].onclick=function(){

for(var j=0;j<ali.length;j++){

ali[j].className = '';//Delete all classes of small graph

aa[j].style.display='none';//Hide all large images

aa[j].style.opacity='0';//Set large transparency

}

ali[this.value].className='cur';//Add the yellow box of the clicked picture

aa[this.value].style.display='block';//Display the corresponding big picture

startMove(aa[this.value],'opacity',100,10);//Display large image with flicker

for(var k=0;k<ali.length-4;k++) {

if(oul.offsetLeft==(-128*k) && this.value==(k+3)) {//Determine whether to move the small graph to the left

startMove(oul,'left',oul.offsetLeft-128,5);

}

}

for(var k=ali.length-4;k>0;k--) {

if(oul.offsetLeft==(-128*k) && this.value==k) {//Determine whether to allow moving small graph to the right

startMove(oul,'left',oul.offsetLeft+128,5);

}

}

}

}

// Click the left and right buttons to switch pictures

var nextbtn=document.getElementById('small-next');

var prevbtn=document.getElementById('small-prev');

//Towards the right

nextbtn.onclick=function() {

for(var i=0;i<ali.length;i++) {

if(ali[i].className=='cur') { //Judge focus position

ali[i].className=''; //Cancel all focus

if(i==ali.length-1) {

var i=ali.length-1;

ali[i].setAttribute("class","cur");//Set small image focus

 

}else {

var i=i+1;

ali[i].setAttribute("class","cur");//Set small image focus

}

}

if(ali[i].className=='cur') {

for(var p=0;p<aa.length;p++) {

aa[p].style.display='none';//Hide all large images

aa[p].style.opacity='0';//Set large transparency

}

aa[i].style.display='block';//Show selected large image

startMove(aa[i],'opacity',100,10);

}

}

//Click the right figure to change the picture position

for(var t=0;t<ali.length;t++) {

if(ali[t].className=='cur') {

var p=t;//Get the element where the yellow box is located

}

}

var a=ali.length;

for(var i=3;i<a-1;i++) {

if(p==i) {

startMove(oul,'left',(-128)*(i-2),5);//Mobile small map

}

}

}

//Towards the left

prevbtn.onclick=function() {

for(var i=0;i<ali.length;i++) {

if(ali[i].className=='cur') {

ali[i].className='';

if(i==0) {

ali[0].setAttribute("class","cur");

}else {

var i=i-1;

ali[i].setAttribute("class","cur");

}

}

if(ali[i].className=='cur') {

for(var p=0;p<aa.length;p++) {

aa[p].style.display='none';

aa[p].style.opacity='0'; //Big picture development

}

aa[i].style.display='block';

startMove(aa[i], 'opacity', 100,10); //Big picture development

}

}

//Change picture position

for(var t=0;t<ali.length;t++) {

if(ali[t].className=='cur') {

var p=t;

}

}

var a=ali.length;

for(var i=a-4;i>=1;i--) {

if(p==i) {

startMove(oul,'left',(-128)*(i-1),5);

}

}

}

}

</script>

4. summary

The above is all the code. There are many detours in writing. If you have any questions, you can ask me. Of course, if you have any shortcomings, you can also ask me. At present, I only test IE incompatibility, other mainstream browsers are compatible.

Tags: Javascript Mobile IE

Posted on Sun, 09 Feb 2020 12:52:47 -0500 by riffy