最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于JavaScript实现带缩略图的轮播效果
时间:2017-01-13 编辑:简简单单 来源:一聚教程网
先瞄一眼js轮播效果图
代码:
*{padding:0;margin:0;}
#content {margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;}
#title, #bottom{position:absolute;line-text-align:center;font-size:20px;background:#f1f1f1;}
#bottom{bottom:0;cursor:pointer;}
#bottom span{display:inline-block;border-radius:15px;background:#000;text-align:center;line-position:relative;}
#bottom span.active{background: #FFFF33;}
#bottom span div {position:absolute;top:-125px;left:-46px;display:none;}
#bottom span div:after{content:'';position:absolute;left:49px;bottom:-12px;border-top:7px solid #fff;border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;}
#bottom span img {border:5px solid #fff;}
#left, #right{position:absolute;border-radius:60px;line-font-size:60px;background:#FFFF66;font-weight:bold;text-align:center;top:50%;margin-top:-25px;color:#fff;cursor:pointer;filter(opacity:70);opacity:0.7;}
#left:hover,#right:hover{filter(opacity:100);opacity:1;}
#left{left:0px;}
#right{right:0px;}
#img{}
window.onload = function () {
var bottom = $('bottom'),title = $('title'),
img = $('img'),left = $('left'),right = $('right');
var aSpan = bottom.getElementsByTagName('span');
var aDiv = bottom.getElementsByTagName('div');
var arr = ['图片一','图片二','图片三', '图片四'];
var num = 0;
// 初始化
picTab();
// 点击下一张
right.onclick = function () {
if (num === aDiv.length - 1) num = -1;
num++;
picTab();
}
// 点击上一张
left.onclick = function () {
if (num === 0) num = aDiv.length;
num--;
picTab();
}
function picTab() {
title.innerHTML = arr[num];
img.src = 'img/' + (num + 1) + '.png';
for ( var i = 0; i aSpan[i].className=''; } aSpan[num].className='active'; } // 鼠标移入移出显示缩略图 for ( vari=0; i < aSpan.length; i++ ) { aSpan[i].index= i; aSpan[i].onmouseover=function() { aDiv[this.index].style.display='block'; } aSpan[i].onmouseout=function() { aDiv[this.index].style.display='none'; } aSpan[i].onclick=function() { num=this.index; picTab(); } } function $(id) { return document.getElementById(id);} }