标签和![]()
标签把图片元素展示到页面。代码如下：
<head>
<meta charset="utf-8" />
<title>jQuery轮播图广告</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script src="js/getCode.js"></script>
</head>
<body>
<div id="slideShow">
<a class="slide_pic"><img src="images/5.jpeg" alt="0"></a>
<a class="slide_pic"><img src="images/1.jpeg" alt="1"></a>
<a class="slide_pic"><img src="images/2.jpeg" alt="2"></a>
<a class="slide_pic"><img src="images/3.jpeg" alt="3"></a>
<a class="slide_pic"><img src="images/4.jpeg" alt="4"></a>
<a class="slide_pic"><img src="images/6.jpeg" alt="5"></a>
<button class="prev_one"> < </button>
<button class="next_one"> > </button>
<ul id="mark_box">
<li class="mark">1</li>
<li class="mark">2</li>
<li class="mark">3</li>
<li class="mark">4</li>
<li class="mark">5</li>
<li class="mark">6</li>
</ul>
</div>
</body>
(3)在项目里创建css文件夹，用于存放页面样式style.css文件。核心样式代码如下
#slideShow{
width: 590px;
height: 545px;
background-color: #999999;
text-align: center;
left: 40%;
margin-left: -135px;
position: relative;
}
#slideShow .slide_pic{
position: absolute;
left: 0;
top: 0;
}
img {
width: 590px;
height: 545px;
}
#slideShow .prev_one{
position: absolute;
left: 0;
top: 45%;
}
#slideShow .next_one{
position: absolute;
right: 0;
top: 45%;
}
#slideShow #mark_box{
position: absolute;
bottom: 0;
}
#mark_box .mark{
width: 20px;
height: 20px;
border-radius: 20px;
padding: 10px;
text-align: center;
line-height: 20px;
background-color:beige;
float: left;
list-style: none;
margin: 10px 22px;
cursor: pointer;
}
#mark_box .active_img{
background-color: pink;
}
(4)新建js文件夹，创建getCode.js文件，并编写jQuery代码，实现图片轮播展示和点击导航播放相应图片。具体代码如下：
$(function() {
var prev_mark = 0; //点击上一张按钮时候的一个标志位
var next_mark = 0; //点击下一张按钮时候的一个标志位
var cur_pic = $('.slide_pic').length - 1; //当前图片的序号
$('.prev_one').click(function() {
prev_mark = cur_pic; //获取当前图片的序号
if (prev_mark === 0) {
prev_mark = $('.slide_pic').length - 1;
} else {
prev_mark--;
}
cur_pic = prev_mark;
$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
});
$('.next_one').click(function() {
next_mark = cur_pic;
if (next_mark === $('.slide_pic').length - 1) {
next_mark = 0;
} else {
next_mark++;
}
cur_pic = next_mark;
$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
});
// 轮播图下面的指示点
$.each($('.mark'), function(index, value) {
$(value).click(function() {
cur_pic = this.innerHTML - 1;
$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
$(this).addClass('active_img').siblings('.mark').removeClass('active_img');
});
});
// 鼠标移入图片则停止轮播；鼠标移出图片则开始轮播
var slide_timer = setInterval(auto_slide, 2000);
$('#slideShow').mouseenter(function() {
clearInterval(slide_timer);
});
$('#slideShow').mouseleave(function() {
slide_timer = setInterval(auto_slide, 2000);
});
// 自动轮播函数
function auto_slide() {
if (cur_pic === $('.slide_pic').length - 1) {
cur_pic = 0;
} else {
cur_pic++;
}
$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
}
});
(5)实现结果
