文章标题
2017-12-06 08:41
330 查看
网页顶部和图片轮播
html页面<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/new_file.css" /> </head> <body> <div class='hide'> <div class="content clearfix"> <div class="fr"> <div class="h-fr"> <a class="h-fr-top" href=''>登陆</a> <a class="h-fr-top2" href=''>注册</a> </div> <span class='line'></span> <div class="fr-downlond"> <a class="fr-downlond-more"> <span class='fr-downlond-more-icon'></span> 下载 APP </a> </div> </div> </div> </div> <div class='content daohline'> <div class='dah-logo line-block'> <img width="123" height="45" src="img/下载.png"/> </div> <div class="line-block all-icon"> <div class="sos-icongo line-block"><img width="26" height="30" src="img/shop.png" /></div> <div class="sos-input line-block"><input type="text" placeholder="有双12 6点爆抢活动" /></div> <div class="sos-iconso line-block"><img width="33" height="30" src="img/sou.png" /></div> <div class="br"></div> </div> </div> <div class="content img" id='img'> <div class="all-img"> <div class="img-all"> <a class="img-more" index='1'><img width="1080px" src="img/img1.jpg" /></a> <a class="img-more" index='2'><img width="1080px" src="img/img2.jpg" /></a> 4000 <a class="img-more" index='3'><img width="1080px" src="img/img3.jpg" /></a> </div> <button class='img_button1'><</button> <button class='img_button2'>></button> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/new_file.js"></script> </body> </html>
css样式
*{
margin: 0;
padding: 0;
}
.content{
width: 1080px;
margin: 0 auto;
}
.hide{
width:100%;
height: 48px;
background: #333;
}
.clearfix{
clear: both;
}
.fr-downlond,.h-fr,.head ul li,.img-more{
display: inline-block;
}
.fr{
font-family: "微软雅黑";
font-size: 15px;
float: right;
}
.h-fr{
height: 48px;
line-height: 48px;
}
.h-fr-top,.h-fr-top2{
padding-right:7px;
color: #e7e7e7;
text-decoration: none;
}
.line{
width: 1.5px;
margin: 6px;
height: 14px;
border-right:1px solid #666;
}
.fr-downlond{
margin-left:7px ;
color: #E7E7E7;
}
.head ul{
margin:24px auto;
margin-left: 10px;
}
.head ul li{
color: #333333;
font-size: 14px;
width: 63px;
}
.dis-more{
background: #E7E7E7;
position: absolute;
z-index:21;
height: 150px;
display: none;
}
.all-img{
overflow: hidden;
width: 1080px;
height: 450px;
position:relative;
}
.img_button1{
position: absolute;
top:225px;
left: 10px;
z-index: 11px;
display: inline-block;
margin: auto 0;
}.img_button2{
position: absolute;
top:225px;
right:10px;
z-index: 11px;
display: inline-block;
margin: auto 0;
}
.img-all{
z-index: 10px;
overflow: hidden;
position:relative;
height:450px;
width: 3240px;
}
.img-more{
float: left;
width: 1080px;
height: 450px;
display: inline;
}
.dah-logo{
margin-top:26px;
}
.line-block{
display: inline-block;
}
.daohline{
}js文件
//图片轮播功能
var changindex=0;
//定义图片数量及判断方法
var aa = setInterval(function (){
if(changindex<2){
changindex ++;
}else{
changindex = 0;
}
changTo(changindex);//进行图片显示传入移动值
},3000);
$('.img_button2').click(function(){//左推进图片
console.log(changindex);
changindex = (changindex <2) ? (++changindex) : 0;
changTo(changindex);
});
$('.img_button1').click(function(){//又推进图片
console.log(changindex);
changindex = (changindex >0) ? (--changindex) : 2;
changTo(changindex);
});
//利用改变all-img的位置利用动画改变，和overflow属性。
function changTo(num){
var leftgo=num*1080;
$(".img-all").animate({left:"-"+leftgo+"px"}, 500);
}
$('.head ul li').hover(show);
$('.head ul li').mouseout(hide);效果图
<
9b15
script>
$(".MathJax").remove();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 