响应式图片轮播器----------JavaScript编写

时间:2024-03-26 17:17:07

这里给大家介绍一下用JavaScript编写的一组响应式图片轮播器的组件。先看一下整体页面的UI:

响应式图片轮播器----------JavaScript编写

具体的功能主要有:1.黄边框所处下方四张图片的某一张时,上方大图就显示黄边框所在的图;

                                    2.点击下方最左边的图时,向左滚动一张图,并且改变大图与小图黄标,点击最右边图类似上所述;

                                    3.点击左箭头,向左滚动一张图,并且改变大图与小图黄标,点击最右箭头类似上所述;

                                   具体见代码解释

一、       运动框架

本图片轮播器下方小图,实现的是让图片的滚动,那么这里就引入js的运动框架:

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、布局:这里我选用了六副图片,可以任意增加或者减少图片数量。

<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代码:详细看注释。

<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');

//点击显示大图,并且改变小图焦点

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 = '';//删除小图所有的类

aa[j].style.display='none';//隐藏所有大图

aa[j].style.opacity='0';//设置大图透明度

}

ali[this.value].className='cur';//添加所点击图片的黄框

aa[this.value].style.display='block';//显示对应的大图

startMove(aa[this.value],'opacity',100,10);//显示大图有闪烁感

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

if(oul.offsetLeft==(-128*k) && this.value==(k+3)) {//判断是否允许向左移动小图

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

}

}

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

if(oul.offsetLeft==(-128*k) && this.value==k) {//判断是否允许向右移动小图

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

}

}

}

}

// 点击左右按钮切换图片

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

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

//向右

nextbtn.onclick=function() {

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

if(ali[i].className=='cur') { //判断焦点位置

ali[i].className=''; //取消所有焦点

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

var i=ali.length-1;

ali[i].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';//设置大图透明度

}

aa[i].style.display='block';//显示所选大图

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

}

}

//点击右图改变图片位置

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

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

var p=t;//获取黄框所在元素

}

}

var a=ali.length;

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

if(p==i) {

startMove(oul,'left',(-128)*(i-2),5);//移动小图

}

}

}

//向左

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'; //大图显影

}

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

startMove(aa[i], 'opacity', 100,10); //大图显影

}

}

//改变图片位置

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.总结 

以上就是所有代码,写的时候也遇到不少弯路,有问题可以向我提问,当然有什么不足的地方,也可以提出来。目前我测试的就只有IE不兼容,其余主流浏览器均兼容。