用jQuery简单写图片轮播特效
一、HTML部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/web.css">
</head>
<body>
<div class="picbox">
<ul class="content">
<li class="current"><a href="#"><img src="images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
</ul>
<ul id="content_bg">
<li class="bg">美丽的草原</li>
<li>云里的小镇</li>
<li>出升的太阳</li>
<li>蔚蓝的湖泊</li>
</ul>
<ul id="circle">
<li class="current1"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/web.js"></script>
</body>
</html>
二、css部分(不包含公用样式)
/* CSS Document */
.picbox{
width: 700px;
height: 400px;
margin: 0 auto;
position: relative;
}
.picbox ul li{
display: none;
}
.picbox ul:first-child{
width: 100%;
height: 100%;
}
.picbox ul li img{
width: 100%;
height: 100%;
}
.picbox ul:first-child li{
width: 100%;
height: 100%;
float: left;
position: absolute;
}
.picbox .current{
display: block;
}
#content_bg{
width: 700px;
height: 60px;
color:#fff;
background: rgba(0,0,0,0.4);
position: absolute;
bottom: 0;
line-height: 60px;
}
#content_bg .bg{
padding-left: 50px;
display: block;
}
#circle {
position:absolute;
right:50px;
bottom:20px;
}
#circle li {
width:12px;
height:12px;
background-color:#fff;
border-radius:50%;
margin:0px 4px;
display:inline-block;
cursor:pointer;
}
#circle .current1 {
background-color:#FF7E00;
transition: all 0.4s;
transform: scale(1.5,1.5);
}
三、jQuery部分(重点)
// JavaScript Document
$(document).ready(function(){
var timer = null;
var index = 0;
var pic = $('.content li');
var cir = $('#circle li');
var bg = $('#content_bg li');
/*轮播效果*/
show();
/*鼠标指向当前*/
cir.mouseover(function() {
index = $(this).index();
begin();
});
/*鼠标放上图片按钮 停止轮播*/
cir.mouseenter(function(){
clearInterval(timer);
});
pic.mouseenter(function(){
clearInterval(timer);
});
/*鼠标离开图片按钮 继续轮播*/
cir.mouseleave(function(){
show();
});
pic.mouseleave(function(){
show();
});
/*轮播*/
function show(){
timer = setInterval(function(){
begin();
index++;
if(index === 4){
index = 0 ;
}
}, 2000);
}
/*更改样式*/
function begin() {
pic.eq(index).addClass('current').siblings().removeClass('current');
cir.eq(index).addClass('current1').siblings().removeClass('current1');
bg.eq(index).addClass('bg').siblings().removeClass('bg');
}
});