实现图片轮播
1、HTML代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
</body>
</html>
css代码如下：
ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "���ź�"; margin: 0 1px; 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
position: absolute;
30px;
background:rgba(0,0,0,0.2);
height: 50px;
line-height: 50px;
text-align: center;
top:200px;
z-index: 150;
font-family: "���ź�";
font-size: 28px;
font-weight: bold;
cursor: pointer;
display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
background: orange;
}
jquery代码如下
$(document).ready(function(){ var img=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"); $(".adver").mouseover(function(){ $(".arrowLeft").show(); $(".arrowRight").show(); }).mouseout(function(){ $(".arrowLeft").hide(); $(".arrowRight").hide(); }); var num = 0; $(".arrowRight").click(function(){ // 向左 if(num==img.length-1){ alert("已经是最后一张了"); }else{ num++; $(".adver").css("background","url('images/"+img [num]+"')"); $("li:eq("+num+")").css("background","orange"); $("li:eq("+num+")").siblings().css("background","#333"); } }); $(".arrowLeft").click(function(){ // 向右 if(num==0){ alert("这已经是第一张了"); } else{ num--; $(".adver").css("background","url('images/"+img [num]+"')"); $("li:eq("+num+")").css("background","orange"); $("li:eq("+num+")").siblings().css("background","#333");} }); $("li").click(function(){ // 点击数字 num = $("li").index(this); $(".adver").css("background","url('images/"+img [num]+"')"); $(this).css("background","orange"); $(this).siblings().css("background","#333"); }); });