javascript实现的有缩略图功能的幻灯片切换效果

不久前写了一个简单的图片效果，没想到那么快就要用到项目中，所以功能方面要丰富一下；

主要改进：

1# 用圆点代替之前简单的页数显示，并且点击圆点可以显示对应图片；

2# 点击圆点，显示对应图片的缩略图。

今天完善了一下，当然动画效果，以及其他小细节还没来得及优化：

演示地址：http://codepen.io/anon/pen/rVMKdz

效果图如下：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>imgSwitch stronger</title>
</head>
<body><div id="img_container">
<div class="title_common" id="img_title">正在加载...</div>
<div class="switch_title" id="img_left"></div>
<div class="switch_title" id="img_right"></div><img src="" id="img"><div class="title_common" id="img_page"><ul id="circles">
</ul></div>
</div></body>
</html>

CSS部分：

    *{margin:0;padding: 0;}#img_container{position: relative;margin:15px auto;width: 800px;height: 400px;background-color: #333;display: -webkit-flex;display: flex;border-radius:3px;}.title_common{position: absolute;left: 0;width: 100%;height: 40px;line-height: 40px;color: #fff;text-align: center;}#img_title{top: 0;background-color: rgba(86,171,228,.5);}#img_page{bottom: 0;}.switch_title{position: absolute;top:50%;margin-top: -20px;width: 40px;height: 40px;line-height: 40px;text-align: center;font-size:24px;color:#fff;cursor: pointer;background-color:rgba(0,0,0,.4);}#img_left{left: 0;background: url('http://www.iconfont.cn/uploads/fonts/font-134729-.png?color=ecf0f1&size=32') no-repeat center center;}#img_right{right: 0;background: url('http://www.iconfont.cn/uploads/fonts/font-134735-.png?color=ecf0f1&size=32') no-repeat center center;}#img_container img{max-width:100%;border-radius:3px;}#circles {display: inline-block;margin: 13px 3px;}#circles li{list-style: none;float: left;width: 14px;height: 14px;margin: 0 3px;border-radius: 7px;cursor: pointer;background-color: white; box-shadow: 0 1px 2px rgba(0,0,0,.15);  }#circles li:hover {box-shadow: 0 0 10px orange;
}#circles li.active{background-color: orange;   }.sContent {display: none;width: 120px;height: 80px;padding: 3px;background-color: #fff;position: absolute;right: 0;bottom: 40px;left: 307px;/*307的来源:800/2=400(大盒子的一半)；80/2=40(包含圆点的小盒子一半);400-40=360(小盒子左边距离大盒子左边的距离)；360+3(margin-left: 3px)+7(圆点宽度/2)=370;(圆点中心距离大盒子左边的距离);120/2=60(缩略图div宽度一半);综上：370-60-3(padding-left: 3px)=307px;*/margin: auto;border-radius: 3px;box-shadow: 0 0 3px rgba(0,0,0,0.3);z-index: 2;
}.sContent img{width: 120px;height: 80px;}.sContent:after {content: '';border-style: solid;border-width: 12px 6px 0 6px;border-color: #fff transparent transparent transparent;position: absolute;bottom: -9px;left:50% ;margin-left: -6px;z-index: 1;
}

javascript部分：

var oImg=document.getElementById('img');
var oImg_title=document.getElementById('img_title');//上标
var oImg_page=document.getElementById('img_page');//下标
var oImg_left=document.getElementById('img_left');//左标
var oImg_right=document.getElementById('img_right');//右标
var oCircles=document.getElementById('circles');//圆点包含器
var aLi=oCircles.getElementsByTagName('li');//圆点数组
var arrImg=['http://www.quanjing.com/image/psdefault/slide/20150511.jpg','http://www.quanjing.com/image/psdefault/slide/20150513.jpg','http://www.quanjing.com/image/psdefault/slide/20150519.jpg','http://www.quanjing.com/image/psdefault/slide/20150518.jpg'];//图片数据
var arrImgDes=['上帝之城','用力一击','桌面足球','夏日时光'];//图片对应描述数据
var num=-1;//根据图片数据，动态添加dom元素
for(var i=0;i<arrImg.length;i++){oCircles.innerHTML +="<li><div class='sContent' id='div"+i+"'><img src=''></div></li>";}//圆点动态添加类的函数
function circleChangeColor(){for(var i=0;i<aLi.length;i++){if (aLi[i] !==aLi[num]) {aLi[i].className='';}}aLi[num].classList.add('active');
}//显示图片，描述，以及圆点颜色变化的函数
function changeAll(){oImg.src=arrImg[num];oImg_title.innerHTML=arrImgDes[num];circleChangeColor();}/*下一张*/
oImg_right.οnclick=function(){num++;if (num>arrImg.length-1) {num=0;}changeAll()
}/*上一张*/
oImg_left.οnclick=function(){num--;if (num<0) {num=arrImg.length -1;}changeAll()
}/*circle onclick事件:点击圆点,显示相应图片*/for(var i=0;i<aLi.length;i++){aLi[i].index=i;//添加索引值aLi[i].οnclick=function(){oImg.src=arrImg[this.index];oImg_title.innerHTML=arrImgDes[this.index];/*将没有被选中的圆点初始化*/for(var i=0;i<aLi.length;i++){if (aLi[i] !==aLi[this.index]) {aLi[i].className='';}}aLi[this.index].classList.add('active');//选中的圆点添加类active            }/* circle hover事件*/aLi[i].οnmοuseοver=function(){var position_index=this.index;aLi[this.index].childNodes[0].style.cssText="display:block;margin-left:"+position_index*20+"px"+"";aLi[this.index].childNodes[0].childNodes[0].src=arrImg[this.index];}aLi[i].οnmοuseοut=function(){aLi[this.index].childNodes[0].style.cssText="display:none;";aLi[this.index].childNodes[0].childNodes[0].src='';}}

转载于:https://www.cnblogs.com/kevinCoder/p/4522976.html

javascript实现的有缩略图功能的幻灯片切换效果相关推荐

html叠加层,JavaScript实现多个重叠层点击切换效果的方法
本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtm ...
梦幻无穷的幻灯片切换效果
在播放演示文稿时,增加恰当的幻灯片切换效果可以让整个放映过程体现出一种连贯感,还能让观众集中精力观看.在PowerPoint 2010中,设置幻灯片切换效果将比以往更加简单和自由,让我们通过实际的操作 ...
（专升本）PowerPoint（设置幻灯片切换效果）
目录幻灯片切换效果分为? 操作 "计时"组幻灯片切换效果分为? #mermaid-svg-ebDqVHASnUPePLJI .label{font-family:'trebuc ...
Android移动应用开发之使用异步调用进度条及实现幻灯片切换效果
文章目录异步调用进度条实现幻灯片切换效果异步调用进度条核心代码如下: package scq.scq.asyntaskdemo;import androidx.appcompat.app.Ap ...
各种幻灯片切换效果。soChange
各种幻灯片切换效果.soChange 插件 http://www.sucaijiayuan.com/api/demo.php?url=/demo/20121218-5 转载于:https://ww ...
基于jQuery实现幻灯片切换效果
效果图功能:1.幻灯片自动切换:2.点击下方小圆点切换对应幻灯片:3.点击左右两侧耳朵控制幻灯片切换至上一张或下一张:4.鼠标悬停幻灯片上时,幻灯片停止切换 <!DOCTYPE html> ...
利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
js练习8(幻灯片切换效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
移动web中的幻灯片切换效果
百度或者谷歌下类似的插件有很多,原理都差不多,关键适合自己的项目,如果移动端要引入jquery这么大的插件,只能呵呵了.... 下面是工作中针对webkit内核的浏览器写的,html很简单: < ...

javascript实现的有缩略图功能的幻灯片切换效果

javascript实现的有缩略图功能的幻灯片切换效果相关推荐

最新文章

热门文章