这里给大家介绍一下用JavaScript编写的一组响应式图片轮播器的组件。先看一下整体页面的UI：
具体的功能主要有：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不兼容，其余主流浏览器均兼容。