网页元素切换与图片轮播-优快云博客

本文链接：https://blog.youkuaiyun.com/princegang/article/details/83763551

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.slip{display:none;border:solid 1px #aaddff;border-top-width:0; padding-top:10px}
.active{display:block}
.topItem{float:left; background:url(./images/jrw1_04.gif) no-repeat; width:77px; height:22px;line-height:22px;color:#2f82fb}
.top{height:21px; background-color:#ebf5fa; border:solid 1px #c3e1f0; border-bottom-width:0; padding-left:15px; padding-top:2px}
.top .active{background-image:url(./images/jrw1_03.gif);color:red}


/*滚动图演示*/

#pic-scroller{position:relative;background:#000;width:260px;overflow:hidden;}
#pic-scroller #imgs{height:200px}
#pic-scroller .img_item{display:none}
#pic-scroller #imgs img {border:none}
#pic-scroller .clickButton{float:right;height:14px;line-height:14px;font-size:10px}
#pic-scroller .clickButton span{cursor:pointer;background-color: #666;line-height:14px;height:14px;font-size:10px;padding: 0 6px;color: #fff;display:inline-block}
#pic-scroller .clickButton span.active{background-color: #d34600;opacity:0.6;display:inline-block}
#pic-scroller #panel-content{position:absolute;bottom:10px;height:30px}
#pic-scroller .over-show{color:#fff;font-size:14px;text-align:center;background:#d34600;opacity:0.6;clear:both;display:none}
#pic-scroller .over-show a{color:#fff;font-weight:bold}
#pic-scroller .clickButton div{background:#000;opacity:0.6}
#pic-scroller .active{display:block}
</style>
</head>

<body>

<div style="width:512px; height:400px; font-size:12px;">
    <div style="border:1px solid #9cb9e7; text-align:center; padding-bottom:2px;">
    	<div style="width:507px; padding-top:2px;">
        	<div class="top">
            	<div class="topItem active" onmouseover="showNext(0)">资讯</div>
                <div class="topItem" onmouseover="showNext(1)">游戏</div>
                <div class="topItem"  onmouseover="showNext(2)">购物</div>
                <div style="clear:both"></div>
            </div>

            <div style=""  class="slip active">
           	     the first 资讯
                <div style="clear:both"></div>
            </div>

			<div  class="slip">
           	    中间
                <div style="clear:both"></div>
            </div>

			<div class="slip">
           	  最后
                <div style="clear:both"></div>
            </div>
        </div>
    </div>

    <div style="clear:both"></div>
</div>
<script type="text/javascript">
	function showNext(index){
		var slips=getElementsByClassName('slip');
		var topItem=getElementsByClassName('topItem');
		activeItem(topItem,index);
		activeItem(slips,index);
	}
	function activeItem(elementArray,index){
	    if(elementArray[index].className.indexOf("active")==-1){
			elementArray[index].className+=" active";
		}
		for(var i=0;i<elementArray.length;i++){
			if(i!=index){
			    removeClassName(elementArray[i],'active')
			}
		}
	}
	function removeClassName(element,classname){
		var theClassName;
		do{
			theClassName=element.className;
			element.className=theClassName.replace(classname, " ")

		}while(theClassName.indexOf(classname)>=0);
	}
	function getElementsByClassName(className, parentElement){
		var elems = (parentElement||document.body).getElementsByTagName("*");
		var result=[];
		for (i=0; j=elems[i]; i++){
			if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
				result.push(j);
			}
		}
		return result;
	} 
</script>
<div id="pic-scroller">
	<div id="imgs">
		<a href="#" class="img_item active"><img src="00.jpg" alt='00.jpg'/></a>
		<a href="#" class="img_item"><img src="01.jpg" alt='01.jpg'/></a>
		<a href="#" class="img_item"><img src="02.jpg" alt='02.jpg'/></a>
		<a href="#" class="img_item"><img src="03.jpg" alt='03.jpg'/></a>
	</div>
	<div id="panel-content">
		<div class="clickButton">
		    <span class="b_item active" onmouseover="stopval(0,0)" onmouseout="stopval(0,1)">1</span>
			<span class="b_item"  onmouseover="stopval(1,0)" onmouseout="stopval(1,1)">2</span>
			<span class="b_item" onmouseover="stopval(2,0)" onmouseout="stopval(2,1)">3</span>
			<span class="b_item" onmouseover="stopval(3,0)" onmouseout="stopval(3,1)">4</span>
		</div>
		<div class="over-show active"><a href="#">img222</a></div>
		<div class="over-show"><a href="#">img333</a></div>
		<div class="over-show"><a href="#" >img444</a></div>
		<div class="over-show"><a href="#">img555</a></div>
	</div>
</div>
<script type="text/javascript">
var imgArray = getElementsByClassName("img_item");
var showArray =getElementsByClassName("over-show");
var buttonArray=getElementsByClassName("b_item");
var size=imgArray.length;
var interval;
function scroller(opt) {    

	var pic_scroller=document.getElementById("pic-scroller");
	var img_id=document.getElementById("imgs");
    pic_scroller.style.width = (opt.width ? opt.width : 300)+'px';    
	img_id.style.height = (opt.img_height ? opt.img_height : 200)+'px';
	var width=pic_scroller.style.width;
	for(var i=0;i<showArray.length;i++){
		showArray[i].style.width=width;
	}
    var times = 1;

	interval = window.setInterval(function() {
		if (times == size ) {
			times = 0;
		}
        changeImage(times++);
    }, 2000);
}
function changeImage(times) {	
	if(imgArray[times].className.indexOf("active")==-1){
			imgArray[times].className+=" active";
	}
	if(showArray[times].className.indexOf("active")==-1){
		showArray[times].className+=" active";
	}
	if(buttonArray[times].className.indexOf("active")==-1){
		buttonArray[times].className+=" active";
	}
	for(var i=0;i<size;i++){
		if(i!=times){
			 removeClassName(imgArray[i],'active');
			 removeClassName(showArray[i],'active');
			 removeClassName(buttonArray[i],'active');
		}					
	}

}
function stopval(index,type){
    if(type==0){
		clearInterval(interval);
		changeImage(index);	
	}else{
		clearInterval(interval);
		index+=1;
		interval = window.setInterval(function() {
			if (index == size ) {
				index = 0;
			}
			changeImage(index++);
		}, 2000);
	}
}


scroller({width:190,img_height:230});
</script>


</body>
</html>
js图片切换
