<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="ifount/iconfont.css">
<style>
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.banner{
position: relative;
width: 1200px;
height: 600px;
margin: 0 auto;
/*background-color: blue;*/
/*用淡出的话会显示一下背景色*/
border:1px solid black;
}
img{
position: absolute;
display: none;
}
.left,.right{
z-index: 1;
display: none;
position: absolute;
width: 50px;
height: 100%;
background-color: black;
opacity:.3;
transition: all 1s;
}
.right{
right: 0;
}
.banner i{
position: absolute;
width: 50px;
height: 50px;
font-size: 50px;
line-height: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
margin: auto;
color:#fff;
cursor: pointer;
opacity:.5;
}
.banner:hover .left,.banner:hover .right{
display: block;
}
.left:hover i,.right:hover i{
opacity: 1;
}
.active{
z-index: 1;
}
ul{
position: absolute;
z-index: 1;
list-style: none;
margin: 0 auto;
padding: 0;
top: 80%;
left: 40%;
}
ul li{
float: left;
width: 20px;
height: 20px;
margin:0 20px;
border-radius: 50%;
cursor: pointer;
border: 1px solid green;
}
.content{
background-color: green;
}
.pieview{
position: absolute;
z-index: 1;
top: 20%;
height: 120px;
min-width:120px;
background-color: #000;
opacity:.5;
}
.pieview #flex{
display: inline-block;
width: 120px;
height:120px;
margin: 0;
font-size: 60px;
line-height: 120px;
color:#fff;
text-align: center;
}
#images{
position: relative;
left: 120px;
}
#flex:hover+#images{
display: block!important;
}
</style>
</head>
<body>
<div class="banner">
<img src="../images/1.jpg" width="1200" style="display:block" class="active" alt="">
<img src="../images/2.jpg" width="1200" alt="">
<img src="../images/3.jpg" width="1200" alt="">
<img src="../images/4.jpg" width="1200" alt="">
<img src="../images/5.jpg" width="1200" alt="">
<div class="left">
<i id="prev" class="iconfont"></i>
</div>
<div class="right">
<i id="next" class="iconfont"></i>
</div>
<div class="pieview">
<i id="flex" class="iconfont"></i>
<img src="../images/1.jpg" height="120" width="240" id="images" alt="">
</div>
<ul></ul>
</div>
<script src="jquery.js"></script>
<script>
$(function(){
var count=0;
var t;
t=setTimeout(function(){
$('#next').click();
},2000);
//鼠标移入清除计时器，移出再加上
$('.banner').hover(function(){
clearTimeout(t)
},function(){
t=setTimeout(function(){
$('#next').click();
},2000);
})
//循环生成li到页面上
$('img').not("#images").each(function(index){
$li=index==0?$("<li class='content'></li>"):$("<li></li>");
$('ul').append($li)
})
//给li添加单击事件
$('ul li').on('click', d=function(){
//不让连续点击
$(this).off('click');
//让count等于单击的那一个的下标
count=$(this).index();
var _this=this;
fn(_this,d);
})
//封装函数
function fn(_this,c,id){
clearTimeout(t);
//让当前的li去掉类名顺便给点击的那一个加上类名
$('ul li').filter('.content').removeClass('content').end().eq(count).addClass('content');
var $act=$('.active');
/*用淡出的话会显示一下背景色*/
$('img').not('#images').not('.active').hide().end().filter('.active').removeClass('active').end().eq(count).addClass('active').fadeIn(2000,function(){
//当移入完成之后才让那个消失display:none;
$act.hide();
//执行完之后再重新绑定事件
$(_this).on('click',c);
//这是为了给按钮加的
t=setTimeout(function(){
$('#'+id).click();
},2000);
//这是让下一张图片提前显示在左上角
var num= count>=4?1:count+2;
$('#images').attr("src","../images/"+num+".jpg")
});
}
$('#next').on('click', a=function(){
$(this).off('click');
count++;
count<=4?"":count=0;
var _this=this;
fn(_this,a,"next");
})
$('#prev').on('click', b=function(){
$(this).off('click');
count--;
count>=0?"":count=4;
var _this=this;
fn(_this,b,"prev");
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号