轮播图实现教程-优快云博客

本文链接：https://blog.youkuaiyun.com/lideenweb/article/details/58600303

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
.out{position:relative; width: 670px;height:400px;margin:50px auto; }
.out .img li{position: absolute;top:0;left: 0;display: none;}
.out .num{position: absolute;bottom: 20px;left: 0;width: 100%;text-align: center;font-size: 0;}
.out .num li{width: 20px;height: 20px;display: inline-block;font-size: 16px;border-radius: 50%;text-align: center;line-height: 20px; margin:0 3px; color: #fff;background-color: #666; cursor: pointer;}
.out .num li.active{background-color: #a00}
.out .btn{position: absolute;top:50%;height: 60px;width: 30px;margin-top: -30px;font-size: 30px;background: rgba(0,0,0,.5);color: #fff;text-align: center;line-height: 60px;display: none;}
.out:hover .btn{display: block;cursor: pointer;}
.out .left{left: 0;}
.out .right{right: 0;}
</style>
</head>
<body>
<div id="out" class="out">
<ul class="img">
<li><a href=""><img src="img/1.jpg"> <span>第一张图片</span></a></li>
<li><a href=""><img src="img/2.jpg"> <span>第二张图片</span></a></li>
<li><a href=""><img src="img/3.jpg"> <span>第一张图片</span></a></li>
<li><a href=""><img src="img/4.jpg"> <span>第二张图片</span></a></li>
<li><a href=""><img src="img/5.jpg"> <span>第一张图片</span></a></li>
<li><a href=""><img src="img/6.jpg"> <span>第二张图片</span></a></li>
</ul>
<ul class="num">

</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
<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);//创建li标签塞到页面中
};
$(".img li").eq(0).show();//显示第一张图片
$(".num li").eq(0).addClass("active");//给第一张图片底部数字加class
$(".num li").mouseover(function(){//鼠标滑过图片底部的数字函数
$(this).addClass("active").siblings().removeClass("active");//鼠标在那张图片上给那张图片添加active类，划出删除active类
var index =$(this).index();//定义底部数字索引值
i=index;//底部数字索引值等于图片索引值
$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);//鼠标移动到的数字上显示对应的图片
});
//自动控制图片轮播
var i=0;//初始i=0

var t=setInterval(move,1500);//自动控制图片轮播1.5秒执行movel方法
//向左切换函数
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);
})

k_touch();
//触摸滑动模块
function k_touch() {
var _start = 0, _end = 0, _content = document.getElementById("out");
_content.addEventListener("touchstart", touchStart, false);
_content.addEventListener("touchmove", touchMove, false);
_content.addEventListener("touchend", touchEnd, false);
function touchStart(event) {
var touch = event.targetTouches[0];
_start = touch.pageX;
}
function touchMove(event) {
var touch = event.targetTouches[0];
_end = (_start - touch.pageX);
}

function touchEnd(event) {
if (_end < -100) {
moveL();
_end=0;
}else if(_end > 100){
move();
_end=0;
}
}
}
})()
</script>
</body>
</html>