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.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实现的有缩略图功能的幻灯片切换效果

最新文章

热门文章