html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div id="header" class="row header">
<div id="heaText" class="col-xs-12 col-sm-4 col-md-3 col-lg-8">
welcome
</div>
<div class="pull-left pull col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="heaLeft">
<button class="Left1 btn">
DOOLAR
</button>
<button class="Left1">
<span class="caret"></span>
</button>
</div>
</div>
<div class="pull-right pull col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="heaRight pull-right">
<button class="Left1">
<span class="caret"></span>
</button>
<button class="Left1 btn">
DOOLAR
</button>
</div>
</div>
</div>
<div class="row">
<div id="box" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
</div>
</div>
<div class="show row">
<div class="col-xs-4 col-sm-6 col-md-4 col-lg-4">
<figure>
<img src="image/abt-1.jpg" />
</figure>
</div>
<div class="col-xs-4 col-sm-6 col-md-4 col-lg-4">
<figure>
<img src="image/abt-2.jpg" />
</figure>
</div>
<div class="col-xs-4 col-sm-12 col-md-4 col-lg-4">
<figure>
<img src="image/abt-3.jpg" />
</figure>
</div>
</div>
<div class="anim row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<figure class="an1">
<img src="image/abt-1.jpg">
</figure>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<figure class="an2">
<img src="image/abt-2.jpg">
</figure>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<figure class="an3">
<img src="image/abt-3.jpg">
</figure>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<figure class="an4">
<img src="image/abt-3.jpg">
</figure>
</div>
</div>
<footer>
<div>
<p>网站属于******所有</p>
</div>
</footer>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</html>
css:
@charset "UTF-8";
*{
margin: 0;
padding:0;
box-sizing:border-box;
}
body,ul,li,p{margin:0;padding:0;}
ul{list-style-type: none;}
button{border:0;outline:none;}
.header{
height: 60px;
background:#000000;
}
#heaText{
height: 60px;
line-height: 60px;
background:#00A8f7;
text-align: center;
font-size: 40px;
color: #FFFFFF;
font-weight: bold;
}
.pull{
color: #FFFFFF;
background: #000000;
height: 60px;
}
.heaLeft,.heaRight{
margin-top: 16px;
}
.Left1{
background: #000000;
}
/* 600px以下 */
@@media screen and (max-width:600px;) {
.heaLeft{width: 100%;}
}
/* 轮播图 */
#box {position:relative;width:100%;height:402px;margin:10px auto; }
#box .imgList{position:relative;width:100%;height:400px;overflow:hidden;}
#box .imgList li{position:absolute;top:0;left:0;width:100%;height:400px;}
#box .imgList li img{width: 100%}
#box .imgList li:nth-of-type(1){z-index: 999;}
#box .countNum{width: 130px;height: 23px;z-index: 9999;margin: 5px auto;}
#box .countNum li{
width:30px;height:10px;float:left;color:#fff;
background:#00f;text-align:center;
margin-left:10px;cursor:pointer;opacity:0.7;
filter:alpha(opacity=70);font-size: 20px;
}
#box .countNum li.current{
background:#f60;font-weight:bold;
opacity:1;filter:alpha(opacity=70);
}
@media screen and (max-width: 992px) {
#box{width: 100%;height: 300px;}
#box .imgList{width: 100%;height: 300px;}
#box .imgList li{width: 100%;height: 300px;}
}
@media screen and (max-width: 767px) {
#box{width: 100%;height: 241px;}
#box .imgList{width: 100%;height: 241px;}
#box .imgList li{width: 100%;height: 241px;}
}
@media screen and (max-width: 600px) {
#box{width: 100%;height: 224px;}
#box .imgList{width: 100%;height: 224px;}
#box .imgList li{width: 100%;height: 224px;}
}
@media screen and (max-width: 560px) {
#box{width: 100%;height: 190px;}
#box .imgList{width: 100%;height: 190px;}
#box .imgList li{width: 100%;height: 190px;}
}
@media screen and (max-width: 470px) {
#box{width: 100%;height: 140px;}
#box .imgList{width: 100%;height: 140px;}
#box .imgList li{width: 100%;height: 140px;}
}
/* 轮播图下的图片 */
.show div{
margin-top: 20px;
}
.show div figure{
position: relative;
}
.show div figure img{
width: 100%;
}
.anim{
padding-top: 20px;
}
.anim div{
padding-top: 20px;
}
.anim figure{
width: 100%;
position: relative;
height: 200px;
overflow: hidden;
}
/* 底部 */
footer{
background: #FFFFFF;
}
footer div p{
text-align: center;
margin-top: 20px auto;
}
js:
function runImg(){}
runImg.prototype={
bigbox:null,
boxul:null,
imglist:null,
numlist:null,
index:0,
timer:null,
play:null,
imgurl:[],
count:0,
$:function(obj){
if(typeof(obj)=="string"){
if(obj.indexOf("#")>=0){
obj=obj.replace("#","");
if(document.getElementById(obj)){
return document.getElementById(obj);
}else{
alert("没有容器"+obj);
return null;
}
}else{
return document.createElement(obj);
}
}else{
return obj;
}
},
info:function(id) {
this.count = this.count <= 5 ? this.count : 5;
this.bigbox = this.$(id);
for (var i = 0; i < 2; i++) {
var ul = this.$("ul");
for(var j=1;j<=this.count;j++){
var li=this.$("li");
li.innerHTML=i==0?this.imgurl[j-1]:"";
ul.appendChild(li);
}
this.bigbox.appendChild(ul);
}
this.boxul=this.bigbox.getElementsByTagName("ul");
this.boxul[0].className="imgList";
this.boxul[1].className="countNum";
this.imglist=this.boxul[0].getElementsByTagName("li");
this.numlist=this.boxul[1].getElementsByTagName("li");
this.numlist[0].className="current";
},
action:function(id){
this.autoplay();
this.mouseoverout(this.bigbox,this.numlist);
},
imgshow:function(num,numlist,imglist){
this.index=num;
var alpha=0;
for(var i=0;i<numlist.length;i++){
numlist[i].className="";
}
numlist[this.index].className="current";
clearInterval(this.timer);
for(var j=0;j<imglist.length;j++){
imglist[j].style.opacity=0;
imglist[j].style.filter="alpha(opacity=0)";
}
var $this=this;
this.timer=setInterval(function(){
alpha+=2;
if(alpha>100){alpha=100}
imglist[$this.index].style.opacity=alpha/100;
imglist[$this.index].style.filter="alpha(opacity="+alpha+")";
if(alpha==100){clearInterval($this.timer)}
},20);
},
// //自动播放
autoplay:function(){
var $this=this;
this.play=setInterval(function(){
$this.index++;
if($this.index>$this.imglist.length-1){$this.index=0}
$this.imgshow($this.index,$this.numlist,$this.imglist);
},2000)
},
// //处理鼠标事件
mouseoverout:function(box,numlist){
var $this=this;
box.onmouseover=function(){
clearInterval($this.play);
};
box.onmouseout=function(){
$this.autoplay($this.index);
};
for(var i=0;i<numlist.length;i++){
numlist[i].index=i;
numlist[i].onmouseover=function(){
$this.imgshow(this.index,$this.numlist,$this.imglist);
}
}
}
};
window.onload=function(){
var runimg=new runImg();
runimg.count=3;
runimg.imgurl=[
"<img src='image/bnr-1.jpg'/>",
"<img src='image/bnr-2.jpg'/>",
"<img src='image/bnr-3.jpg'/>"];
runimg.info("#box");
runimg.action("#box");
};
图片=>地址
效果:
1200以上
990-1200:
770-990:
770以下: