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

浏览数：16 / 时间：2015年06月08日

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

主要改进：

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