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后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图: 如果没有说明你还没有激活这功能.我们需要在你 ...
随机推荐
- iOS中block实现的探究
[0. Brief introduction of block] Block是iOS4.0+ 和Mac OS X 10.6+ 引进的对C语言的扩展,用来实现匿名函数的特性. 用维基百科的话来说,Blo ...
- 学习设计模式--观察者模式(C++)
1. 说说简单的函数回调 首先说说一种简单的函数回调机制(一种通过获取对象的指针来进行函数的调用方法)以下是代码演示--- 这是观察者(被回调)部分: class Observer { public: ...
- Java当中的运算符
一.关于Java当中运算符的分类 算术运算符:+,-,*,/.%(是取余运算符读莫).++.-- 关系运算符:>.<.>=.<=.!=(不等).==(等于) 布尔运算符:!(非 ...
- C语言union关键字
union 关键字的用法与struct 的用法非常类似. union 维护足够的空间来置放多个数据成员中的“一种”,而不是为每一个数据成员配置空间,在union 中所有的数据成员共用一个空间,同一时间 ...
- VLV INDEX
Normally, when the Directory Server conducts a search, the server looks through the entire entry for ...
- 忘记 mysql5.5.24 数据库 root 密码
兹整理如下,供网友参考 第一步:关闭mysql服务 第二步:新建txt 写入如下内容 UPDATE mysql.user SET Password=PASSWORD('blog.const.net.c ...
- 自定义控件 闪烁效果的TextView
使用 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android ...
- 获取checkboxlist选中的值以及绑定来自之前选中的来自数据库的值
//////ps:一下几句都是一个意思,为的是以后有人搜索关键字的时候能定位到这里///checkboxlist绑定选中值///checkboxlist绑定来之mssql数据的值///checkbox ...
- 类库dll引用不成功问题
警告:未能解析引用的程序集“*******, Version=1.0.0.0, Culture=neutral,”,因为它对不在当前目标框架“.NETFramework,Version=v4.0,Pr ...
- 一些小trick~
做质因子分解的时候将先打素数表会节省很多时间