<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0;}
li{ list-style:none;}
#div1{ min-width:1000px; height:400px; position:relative; overflow:hidden;}
#div1 ul{ left:0; position:absolute;}
#div1 ul li{ float:left;}
#div1 ul li img{ position:relative;}
#btn{ position:absolute; bottom:10px; text-align:center; width:100%;}
#btn a{ width:11px; height:11px; background:#666; cursor:pointer; display:inline-block;}
#btn a:hover,#btn a.active{ background:#FFF;}
*html .ie6_out{ margin-left:1000px;zoom:1;}
*html .ie6_in{ position:relative; float:left; margin-left:-1000px;}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oDiv.getElementsByTagName('li');
var aImg = oDiv.getElementsByTagName('img');
var oBtn = document.getElementById('btn');
var aA = oBtn.getElementsByTagName('a');
var imgWidth = 1920;
var iNow = 0;
var iNow2 = 0;
oUl.style.width = imgWidth*aImg.length + 'px';
function toResize(){
var viewWidth = document.documentElement.clientWidth;
if(viewWidth>1000){
for (var i = 0; i<aImg.length;i++){
aImg[i].style.left = -(imgWidth - viewWidth)/2 + 'px';
}
}
}
toResize();
window.onresize = function(){
toResize();
}
for(var i = 0; i<aA.length;i++){
aA[i].index = i;
aA[i].onclick = function(){
for(var i = 0; i<aA.length;i++){
aA[i].className = '';
}
this.className = 'active';
startMove(oUl,{left: -this.index*imgWidth});
}
}
setInterval(toRun,3000);
function toRun(){
if(iNow == aLi.length - 1){
iNow = 0;
aLi[0].style.position = 'relative';
aLi[0].style.left = aImg.length * imgWidth + 'px';
}
else{
iNow++;
}
iNow2++;
for(var i = 0; i<aA.length;i++){
aA[i].className = '';
}
aA[iNow].className = 'active';
startMove(oUl,{left: -iNow2*imgWidth},function(){
if(iNow == 0){
aLi[0].style.position = 'static';
oUl.style.left = 0;
iNow2 = 0;
}
});
}
}
</script>
</head>
<body>
<!--[if lte IE 6]>
<div class = "ie6_out">
<div class = "ie6_in">
<![endif]-->
<div id="div1">
<ul>
<li><img src="语诺健康/p_w_picpaths/3.jpg"></li>
<li><img src="语诺健康/p_w_picpaths/4.jpg"></li>
<li><img src="语诺健康/p_w_picpaths/6.jpg"></li>
<li><img src="语诺健康/p_w_picpaths/7.jpg"></li>
</ul>
<div id="btn">
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<!--[if lte IE 6]>
</div>
</div>
<![endif]-->
</body>
</html>
华为轮播图
原创jiuyuechumei ©著作权
文章标签 absolute position background relative display 文章分类 代码人生
下一篇:完美运动框架
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
-
【Jquery插件集合】轮播、时间处理插件
【Jquery插件集合】轮播、时间处理插件
jquery css JavaScript -
JS轮播图(网易云轮播图)
js实现网易云轮播图的完整思路以及代码
html5 css javascript html 学习 -
iOS 自定义轮播图 轮播图自动轮播
1.轮播图布局,图片,左右箭头切换,下标序号,实现样式布局方法有很多,这个仅供参考<div class="box"> <ul class="img-wrapper"> <li class="img active"> <a href="">
iOS 自定义轮播图 html html5 css javascript -
element 产品轮播图 轮播图vue代码
写在前面每一篇文章都希望您有所收获,每一篇文章都希望您能静下心来浏览、阅读。每一篇文章都是作者精心打磨的作品。如果您觉得杨戬这个小白还有点东西的话,杨戬希望正在看文章的您可以帮忙点亮那个点赞的按钮(效果更加),对于杨戬这个暖男来说,真的真的非常重要,这将是我持续写作的动力。前言写这篇文章的目的主要是将以前所学的知识结合起来,进一步巩固一下自己的记忆,防止遗忘(主要是害怕老年痴呆),当然更重要的是学
element 产品轮播图 css轮播图 javascript实现图片轮播 一个图片 在另一个图片定位 一个图片 在另一个图片定位左上角