html-css-js（2）

最新推荐文章于 2018-10-25 21:08:01 发布

Tila

最新推荐文章于 2018-10-25 21:08:01 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/ya__tao/article/details/81562289

版权

旋转效果：

代码实现：

html：

<div id="qi"><img src="./images/hnz_hyj_down.gif"></div>

css：

#qi{
	position:absolute;
	top:200px;
	left:80px;
	-webkit-transition:all .8s ease;
	}

#qi:hover{
  -webkit-transform:rotateZ(180deg);
    }

左右按键轮播效果：

实现代码：

html：

<div id="shang_content">
          <div id="yi">
          <div id="liangzhang">
              <div class="litem"><img src="./images/hnz_sm_banner1.gif"></div>
              <div class="litem"><img src="./images/hnz_sm_banner1.gif"></div>
              <div class="litem"><img src="./images/hnz_sm_banner1.gif"></div>
              <div class="litem"><img src="./images/hnz_sm_banner1.gif"></div>
             </div>
          </div>
          <div id="er">
          <div id="ha"><img src="./images/hnz_hover_right.gif"></div>
          <div id="ha2"><img src="./images/hnz_hover_left.gif"></div>
          </div>
 </div>

css：

#shang_content{
	width:1000px;
	height:264px;
	margin:0 auto;
	border:1px solid #ccc;
	
	}
	
#yi{
	width:494px;
	height:264px;
	overflow: hidden;
	float:left;
	border:1px solid #ccc;
	margin-left:-1px;
	margin-top:-1px;
	}

#liangzhang{
	width: 2000px;
	height: 264px;
	float:left;
	border:1px solid #ccc;
	margin-left:-1px;
	margin-top:-1px;
	-webkit-transition:all .8s ease;
}
	
#er{
	width:63px;
	height:264px;
	
	/*border:1px solid #ccc;*/
	
	
	float:left;
	}
#ha2{
	margin-top:60px;
	margin-left:15px;
	}
#ha{
	margin-top:70px;
	margin-left:15px;
	}

.litem{
	width:494px;
	height:264px;
	float:left;
	}

js：

var el = document.getElementById('ha');
var el2 = document.getElementById('ha2');
var liang=document.getElementById('liangzhang')
var xiangzuo=-494;
var xiangyou=0;
el.onclick = function(){
	
	liang.style.marginLeft=xiangzuo+'px';
	xiangzuo=xiangzuo-494;
	if (xiangzuo<-1970) {xiangzuo=0;}
   } 


el2.onclick = function(){
	liang.style.marginLeft=xiangyou+'px';
	xiangyou=xiangyou+494;
	if (xiangyou>0) {xiangyou=-1500;}
}