您的位置：首页 > Web前端 > JQuery

jQuery实现简单图片的轮播(自右向左播放)

2016-07-31 20:39 591 查看

简单的轮播大概内容分为如下三点：

1.轮播图片的存储；

2.轮播的样式（注意：图片存储的总宽度，以及图片移动相对元素的定位的元素）；

3.JQuery中的计时器调用动画移动图片轮播。

一、carouselFigure.html编写图片的存储，以及所在范围

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CarouselFigure(自右向左)</title>
<link rel="stylesheet" type="text/css" href="carouselFigureCSS.css">
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="carouselFigureJS.js"></script>
</head>
<body>
<!--jQuery实现简单图片的轮播(自右向左播放)-->
<!--最外层-->
<div class="carousel">
<!--图片切换的范围-->
<div class="banner">
<!--图片存储-->
<ul class="figureList">
<li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图1.jpg"/></a>
</li>
<li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图2.jpg"/></a>
</li>
<li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图3.jpg"/></a>
</li>
<li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图4.jpg"/></a>
</li>
<li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图5.jpg"/></a>
</li>
<li><a href="javascript:void(0)" target="_blank"><img src="轮播图片/轮播图6.jpg"/></a>
</li>
</ul>
</div>
</div>
</body>
</html>

二、carouselFigureCSS.css以上html每层的样式。

/*通用CSS属性*/
* {
margin: 0;
padding: 0;
}

/*最外层的*/
.carousel {
width: 580px;
height: 360px;
margin: 30px auto;
}

/*图片切换的范围*/
.banner {
width: 580px;
height: 360px;
overflow: hidden;
position: relative;
}

/*存储图片的ul*/
.figureList {
list-style: none;
/*存储的图片的总宽度*/
width: 3480px;
height: 360px;
overflow: hidden;
position: absolute;
}

.figureList li {
float: left;
/*转换为行元素*/
display: inline;
}

.figureList li a {
text-decoration: none;
}

.figureList li img {
width: 580px;
height: 360px;
}

三、carouselFigureJS.js图片轮播动画

$(function () {

//当前下标countIndex
var countIndex = 0;
//图片总数，即图片被包裹的li个数
var imageCount = $(".figureList li").length;

//计时器自动调用切换显示的图片下标，1.5秒调用一次。
//一定要注意第一个函数调用不加括号
var autoCarousel = setInterval(figureIndex, 1500);

//转换下标，并调用动画切换图片
function figureIndex() {
if (countIndex < imageCount - 1) {
countIndex++;
} else {
countIndex = 0;
}
//调用切换
changeTo(countIndex);
}

//切换图片
function changeTo(num) {
//切换图片，也就是把figureList类（ul）向左移动。
var leftGo = num * 580;
$(".figureList").animate({"left": "-" + leftGo + "px"}, 500);
}
});
/**
* Created by 洋   汪 on 2016/7/31.
*/

以上为简单的只有图片的轮播，接下来的日子我将会写出带有按钮等之类的附加内容。请大家敬请关注。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 动画图片轮播

相关文章推荐

新的分享

章节导航