片段 1片段 2片段 3
css
*{
margin:0;
padding: 0;
list-style: none;
font-family: "Microsoft YaHei", "���ź�";
}
.banner{
width:550px;
height: 300px;
border: 5px solid #cc6699;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.banner .img {
width: 3000px;
position: absolute;
left: 0;
top: 0;
}
.banner .img li{
float: left;
text-decoration: none;
}
.banner .num {
width:100%;
position: absolute;
bottom: 10px;
left: 0;
text-align: center;
font-size:0px;
}
.banner .num li{
width: 10px;
height: 10px;
background: #888;
display: inline-block;
border-radius: 50%; /*设置圆角*/
margin: 0 3px;
}
.banner .num li.on{
background-color: #f60;
}
.banner .btn{
width: 30px;
height: 50px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top:50%;
margin-top: -25px;
cursor: pointer;
font-size: 40px;
color: #ffffff;
text-align: center;
line-height:50px;
}
.banner .btn_l{
left:0;
}
.banner .btn_r{
right: 0;
}
javascript
/**
* Created by Administrator on 2017/9/22.
*/
$(function (){
var size;
var clone=$(".banner .img li").first().clone();
$(".banner .img").append(clone);
size=$(".banner .img li").size();
alert(size);
for(var j=0;j<size-1;j++){
$(".banner .num").append("<li></li>")
}
var i=0;
$(".banner .btn_l").click(function(){
i--;
if(i==-1){
$(".banner .img").css({left:-(size-1)*550});
i=size-2;
}
$(".banner .img").animate({left:-(i*550)},500);
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
});
$(".banner .btn_r").click(function(){
i++;
if(i==size){
$(".banner .img").css({left:0});
i=1;
}
$(".banner .img").animate({left:-(i*550)},500);
if(i==size-1){
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
}else{
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}); /*鼠标划入原点事件*/
$(".banner .num li").hover(function () {
var index=$(this).index();
i=index;
$(this).addClass("on").siblings().removeClass("on");
$(".banner .img").stop().animate({left:-index*550},550);
});
//轮播
var t=setInterval(function(){
i++;
if(i==size){
$(".banner .img").css({left:0});
i=1;
}
$(".banner .img").animate({left:-(i*550)},500);
if(i==size-1){
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
}else{
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
},2000);
//对banner的定时器进行操作
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
if(i==size){
$(".banner .img").css({left:0});
i=1;
}
$(".banner .img").animate({left:-(i*550)},500);
if(i==size-1){
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
}else{
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
},2000);
});})
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>轮播图片</title>
<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>
<div class="banner">
<ul class="img">
<li><a href=""><img src="../img/1.jpg" ></a></li>
<li><a href=""><img src="../img/2.jpg" ></a></li>
<li><a href=""><img src="../img/3.jpg" ></a></li>
<li><a href=""><img src="../img/4.jpg" ></a></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../js/web.js"></script>
</html>
