javascript实现的有缩略图功能的幻灯片切换效果
不久前写了一个简单的图片效果，没想到那么快就要用到项目中，所以功能方面要丰富一下；
主要改进：
1# 用圆点代替之前简单的页数显示，并且点击圆点可以显示对应图片；
2# 点击圆点，显示对应图片的缩略图。
今天完善了一下，当然动画效果，以及其他小细节还没来得及优化：
效果图如下：
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.onclick=function(){
num++;
if (num>arrImg.length-1) {
num=0;
}
changeAll()
}
/*上一张*/
oImg_left.onclick=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].onclick=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].onmouseover=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].onmouseout=function(){
aLi[this.index].childNodes[0].style.cssText="display:none;";
aLi[this.index].childNodes[0].childNodes[0].src='';
}
}
javascript实现的有缩略图功能的幻灯片切换效果的更多相关文章
- Elastic Image Slider 带缩略图功能的幻灯片
今天我们要为您展示如何创建一个简单的弹性幻灯片,带有缩略图预览功能.Elastic Image Slider 这款幻灯片能够自动调整以适应到其父容器,我们可以通过幻灯片使用缩略图预览或幻灯片的自动播放 ...
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- 旋转木马幻灯片切换效果JS源码详解
首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...
- 移动web中的幻灯片切换效果
百度或者谷歌下类似的插件有很多,原理都差不多,关键适合自己的项目,如果移动端要引入jquery这么大的插件,只能呵呵了.... 下面是工作中针对webkit内核的浏览器写的,html很简单: < ...
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880
- JavaScript confirm 自定义风格及功能实现
在网上找了一些弹窗插件,例如bootbox, 功能和动画效果都做的很好,但是很难自定义样式. 项目需要,Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能 ...
- wordpress 缩略图功能函数 the_post_thumbnail
很多 WordPress 主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起.但是目前位置没有一个标准的方法去实现日志缩略图,很多主题 ...
- PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能
PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...
- wordpress教程之自带缩略图功能
首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图: 如果没有说明你还没有激活这功能.我们需要在你 ...
随机推荐
- 中国大推力矢量发动机WS15 跨入 世界先进水平！
"太行"WS-15让俄闭嘴令美叹服 歼20试飞向世界证明,中国军工世界一流,并有望与美英法争夺新一代航空发动机桂冠.笔者请教解放军专家证实:中国四代机所配套的两台18吨推力的WS- ...
- 关于 视频同步vsync 信号在不同一时候钟域採样问题
今天调试 视频 4k(3840 x 1920)的vsync信号(时钟为 297Mhz) 进入 170Mhz 的时钟域, 发现输出来的信号信号抖动特别厉害.后来才发现这是不同一时候钟域 造成的影响. 快 ...
- Vss服务端用户存在,但客户端登陆不进去
打开客户端Vss提示“Cannot find SS.INI file for user userName”,这个错误是找不到用户userName的SS.INI文件. 解决办法 在服务器上找到Vss共享 ...
- Java基础知识强化32：String类之String类的判断功能
1. String类的判断功能: boolean equals (Object obj ) boolean equalsIgnoreCase (String str ) boolean contain ...
- Linux能力(capability)机制的继承
1.Linux能力机制概述 在以往的UNIX系统上,为了做进程的权限检查,把进程分为两类:特权进程(有效用户ID是0)和非特权进程(有效用户ID是非0).特权进程可以通过内核所有的权限检查,而非特权进 ...
- Search 和 Select比较 - 浅谈
Search 语法: public IFeatureCursor Search ( IQueryFilter filter, bool Recycling); Select 语法: pub ...
- php基础之三 数组
一.正则表达式: 1. "/"代表界定符, "^"代表开始符号 "&"结束符号 eg: $reg="/(13[0-9] ...
- jQuery Lazy Load 图片延迟加载
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...
- pyqt5按钮计数
万事开头难,弄了好久才做了一个简单的小程序,点击按钮就显示数字,点一下,自增1. 首先用qt设计师设计一个窗体.标签名为label,按钮名为btn,然后存储为a.ui 在shell中用命令pyuic5 ...
- Tr A（HDU 1575 快速矩阵幂模板）
Tr A Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...