目的：
1．掌握jQuery处理动画效果的方法；
2．掌握jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法；
3．掌握jQuery自定义动画的定义。
实现效果：
1.实现广告图片的轮播展示效果，鼠标移入图片则停止轮播，鼠标移出图片则开始轮播。
2.实现点击导航播放到相应的图片的效果：当点击前一张图片指示符号“<”时，显示当前图片的前一张图片；当点击后一张图片指示符号“>”时，显示当前图片的后一张图片。
3.点击轮播图指示器时，展示对应的图片效果。
(1)创建一个名称为index.html的文件，在该文件的
标记中应用下面的语句引入jQuery库。
(2)在页面的
标记中，添加一个
- 1
- 2
- 3
- 4
- 5
- 6
(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)实现结果
相关阅读
您阅读本篇文章共花了： 本文由 用户 于 2024-01-06 发布在 金钥匙，如有疑问，请联系我们。
本文链接：https://www.51969.com/post/17832634.html
发表评论