前阵子我用js写了一个轮播图，现在的话换成jQuery来实现，先看看效果图
首先是html结构，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery版图片轮播</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="inner clearfix">
<div class="innerwraper"><img src="img/1.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/2.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/3.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/4.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/5.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/6.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/7.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/8.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/1.jpg" alt="" /></div>
</div>
<div class="pagination">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
<a href="javascript:void(0)" class="left-arrow"><</a>
<a href="javascript:void(0)" class="right-arrow">></a>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/new.js"></script>
</body>
</html>
关于css的相关设置：
.container {
margin: 20px auto;
width: 510px;
overflow: hidden;
position: relative;
}
.inner {
position: relative;
width: 9999px;
left: 0;
top: 0;
}
.innerwraper {
float: left;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
display: block;
clear: both;
visibility: hidden;
content: "";
height: 0;
}
a {
text-decoration: none;
}
.left-arrow {
position: absolute;
left: 0;
top: 40%;
width: 10%;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 20px;
}
.right-arrow {
position: absolute;
right: 0;
top: 40%;
width: 10%;
height: 20px;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.pagination{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.pagination span{
display: inline-block;
width: 30px;
height: 30px;
background-color: yellow;
line-height: 30px;
border-radius: 50%;
cursor: pointer;
}
.pagination .active{
background-color: red;
color: #FFFFFF;
}
我是用的jquery版本是jquery-1.11.3.min.js，这里就不提供了，各位童鞋自己去下载哈
js源代码：
var innerGroup = $(".innerwraper");
var leftArrow = $(".left-arrow");
var rightArrow = $(".right-arrow");
var spanGroup = $(".pagination span");
var imgWidth = $(".innerwraper img:first-child").eq(0).width();
var _index = 0;
var timer = null;
var flag = true;
rightArrow.on("click", function() {
//右箭头
flag = false;
clearInterval(timer);
_index++;
selectPic(_index);
})
leftArrow.on("click", function() {
//左箭头
flag = false;
clearInterval(timer);
if (_index == 0) {
_index = innerGroup.length - 1;
$(".inner").css("left", -(innerGroup.length - 1) * imgWidth);
}
_index--;
selectPic(_index);
})
spanGroup.on("click", function() {
//导航切换
_index = spanGroup.index($(this));
selectPic(_index);
})
$(".container").hover(function() {
//鼠标移入
clearInterval(timer);
flag = false;
}, function() {
flag = true;
timer = setInterval(go, 3000);
});
function autoGo(bol) {
//自动行走
if (bol) {
timer = setInterval(go, 3000);
}
}
autoGo(flag);
function go() {
//计时器的函数
_index++;
selectPic(_index);
}
function selectPic(num) {
$(".pagination span").eq(num).addClass("active").siblings().removeClass("active");
$(".inner").animate({
left: -num * imgWidth,
}, 1000, function() {
//检查是否到最后一张
if (_index == innerGroup.length - 1) {
_index %= 8;
$(".inner").css("left", "0px");
$(".pagination span").eq(0).addClass("active").siblings().removeClass("active");
}
})
}
其实原理都是一样，不过jQuery的原理和js原理都一样，不过不同的是jQuery已经把相关的方法封装成了函数，兼容性的相关设置也已经写好。
时间： 2024-09-29 01:18:39