资源描述
效果图
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/test1.banner.css" />
</head>
<body>
<div class="advers">
<div class="adver_cont">
<span id="close">close</span>
<h2>SHOPBEST 商城SHOPBEST 商城SHOPBEST 商城SHOPBEST 商城</h2>
</div>
<div class="navi">
<ul id="btns">
<li>百搭潮</li>
<li>抗皱棉</li>
<li>植绒</li>
<li>潮范</li>
<div class="clear"></div>
</ul>
</div>
<div class="showimg">
<ul id="showimg">
<li><img src="img/ipush1.jpg"></li>
<li><img src="img/ipush2.jpg"></li>
<li><img src="img/ipush3.jpg"></li>
<li><img src="img/ipush4.jpg"></li>
<div class="clear"></div>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/test1.banner.js" ></script>
</body>
</html>
CSS
*{ padding: 0; margin: 0; font: "微软雅黑"; list-style: none;box-sizing: border-box;}
.clear{ clear: both;}
html,body{ margin: 0; padding: 0;}
.advers{ width: 420px; height: 316px;overflow: hidden; position: absolute; right: 0; bottom: 0;;}
.adver_cont{ background: url(../img/title.gif) no-repeat;position: relative; height: 50px;}
.adver_cont span{ width: 16px; height: 16px; background: url(../img/close.jpg) no-repeat; font-size: 0;display: inline-block; position: absolute;top: 8px; right: 8px;cursor: pointer;}
.adver_cont h2{ color: #fff;padding-left: 50px;width: 360px; padding-top: 20px;font-size: 16px; overflow: hidden;text-overflow: clip;white-space: nowrap; font-weight: normal;}
.navi{ width: 420px; background: url(../img/Btn.gif) no-repeat; padding: 3px 10px; height: 30px;}
.navi ul li{ float: left;color: #fff;font-size: 14px; width: 60px; text-align: center;padding: 3px 6px;transition: all 0.4s;cursor: pointer; margin-right: 4px; background: #42312A;}
.navi ul li:hover{ background: #f60;}
.navi ul li.hover{background: #f60;}
.showimg{ background: #000; padding:9px;overflow: hidden; height: 236px;}
.showimg ul li{border: 1px solid #fff;margin: 0 auto; height:216px;overflow:hidden;display:none;}
.showimg ul li img{ width: 100%;}
JS
$(function(){
var shownum=0;
var $btn=$("#btns>li");
$btn.hover(function(){
var shownum=$btn.index(this);
$(this).addClass("hover").siblings().removeClass("hover");
$("#showimg>li").eq(shownum).show().siblings().hide();
});
Play=function(){
shownum++;
if(shownum>=$btn.length){shownum=0};
$btn.eq(shownum).addClass("hover").siblings().removeClass("hover");
$("#showimg>li").eq(shownum).show().siblings().hide();
};
$("#close").click(function(){
clearInterval(time);
$(".advers").slideUp(1000);
});
Pop=function(){
$(".advers").delay(1000).slideDown(1000);
$btn.eq(shownum).addClass("hover");
$("#showimg>li").eq(shownum).show();
time=setInterval(function(){
Play();
},2000);
};
Pop();
})
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
