Loading
0

jQuery图片轮播代码

实现思路

1.轮播图不是通过改变left来轮播的,而是把所有的图片都放在同一个ul里
所以li设置position:absolute;left:0;top:0;ul的父元素设置position:relative;

2,.先通过点击数字1234 num来实现对应的图片,然后左右按钮是通过i++实现。

演示地址

  点我进入

效果预览

图片轮播代码

 

代码展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片轮播效果</title>
<style>
* {
padding: 0;
margin: 0;
}

ul {
list-style: none;
}

.out {
width: 730px;
height: 454px;
margin: 50px auto;
position: relative;
}

.out .img li {
position: absolute;
top: 0;
left: 0;
display: none;
}

.out .img li img {
width: 734px;
height: 454px;
}

.out .num {
position: absolute;
bottom: 20px;
left: 0;
font-size: 0px;
text-align: center;
width: 100%;
}

.out .num li {
width: 20px;
height: 20px;
background: #666;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 50%;
display: inline-block;
font-size: 16px;
margin: 0 3px;
cursor: pointer;
}

.out .num li.active {
background: #a00
}

.out .btn {
position: absolute;
top: 50%;
margin-top: -30px;
width: 30px;
height: 60px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 60px;
font-size: 40px;
display: none;
cursor: pointer;
}

.out:hover .btn {
display: block;
}

.out .left {
left: 0
}

.out .right {
right: 0;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//代码初始化
var size = $(".img li").size();
for (var i = 1; i <= size; i++) {
var li = "<li>" + i + "</li>";
$(".num").append(li);
}
//手动控制轮播图
$(".img li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".num li").mouseover(function() {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i = index;
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
})
//自动轮播
var i = 0;
var t = setInterval(move, 1500);
//核心向左运动函数
function moveL() {
i--;
if (i == -1) {
i = size - 1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//核心向右运动函数
function move() {
i++;
if (i == size) {
i = 0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//左边按钮点击事件
$(".out .left").click(function() {
moveL();
})
//右边按钮点击事件
$(".out .right").click(function() {
move()
})
//定时器的开始于结束
$(".out").hover(function() {
clearInterval(t)
}, function() {
t = setInterval(move, 1500);
})
})
</script>
</head>

<body>
<div class="out">
<ul class="img">
<li>
<a href="http://www.liuguodong.net/category/qianduan"><img src="http://www.liuguodong.net/wp-content/uploads/2016/12/qianduan.png" alt="1"></a>
</li>
<li>
<a href="http://www.liuguodong.net/category/muban"><img src="http://www.liuguodong.net/wp-content/uploads/2016/12/bokemuban.png" alt="2"></a>
</li>
<li>
<a href="http://www.liuguodong.net/category/share/experience"><img src="http://www.liuguodong.net/wp-content/uploads/2016/12/gerenboke.jpg" alt="3"></a>
</li>
<li>
<a href="http://www.liuguodong.net/category/share"><img src="http://www.liuguodong.net/wp-content/uploads/2016/12/neirongfenxiang.png" alt="4"></a>
</li>
</ul>
<ul class="num">
</ul>
<div class="left btn">
<</div>
<div class="right btn">></div>
</div>
</body>

</html>
声明:本文为原创,作者为 刘国栋,转载时请保留本声明及附带文章链接:http://www.liuguodong.net/603.html

最后编辑于:2016/12/6作者: 刘国栋

刘国栋

刘国栋个人博客,是记录博主学习和成长的个人博客网站,关注于web前端和WordPress经验与技巧方面的学习和分享,也会分享一些优秀的个人博客模版。

1 条回应

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 1#

    能加个友链吗

扫一扫关注刘国栋个人博客

扫一扫关注刘国栋个人博客