<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jquery移动端触摸滑动轮播图特效</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
body{background-color: #262626}
*{
padding: 0;
margin: 0;
}
.container{
max-width: 800px;
margin: 0 auto;
}
.slide{
width: 100%;
min-height: 180px;
overflow: hidden;
position: relative;
}
.slide .img{
overflow: hidden;
position: absolute;
transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
}
.slide .img img{
width: calc(100% - 14px);
height: calc(100% - 14px);
margin: 7px;
}
.slide .img1{
width: 40%;
height: 40%;
top: 30%;
left: -50%;
z-index: 1;
}
.slide .img2{
width: 60%;
height: 60%;
top: 20%;
left: -20%;
z-index: 2;
}
.slide .img3{
width: 80%;
height: 80%;
top: 10%;
left: 10%;
z-index: 3;
}
.slide .img4{
width: 60%;
height: 60%;
top: 20%;
left: 60%;
z-index: 2;
}
.slide .img5{
width: 40%;
height: 40%;
top: 30%;
left: 110%;
z-index: 1;
}
.slide-bt{
position: absolute;
left: 50%;
bottom: 13%;
z-index: 10;
}
.slide-bt span{
width: 24px;
height: 8px;
background: #c9caca;
float: left;
margin: 5px;
border-radius: 4px;
}
.slide .slide-bt .on{
background: #ffd200;
}
button{
width: 50px;
margin: 20px;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="container">
<div id="slide" class="slide" class="index-slide" alt="star">
<!-- 轮播图片数量可自行增减 -->
<div class="img"><img src="image/1.png"/></div>
<div class="img"><img src="image/2.png"/></div>
<div class="img"><img src="image/3.png"/></div>
<div class="img"><img src="image/4.png"/></div>
<div class="img"><img src="image/5.png"/></div>
<div class="slide-bt"></div>
</div>
<button onclick="left()">上一页</button>
<button onclick="right()">下一页</button>
</div>
<script>
var autoLb = false; //autoLb=true为开启自动轮播
var autoLbtime = 1; //autoLbtime为轮播间隔时间（单位秒）
var touch = true; //touch=true为开启触摸滑动
var slideBt = true; //slideBt=true为开启滚动按钮
var slideNub; //轮播图片数量
//窗口大小改变时改变轮播图宽高
$(window).resize(function(){
$(".slide").height($(".slide").width()*0.56);
});
$(function(){
$(".slide").height($(".slide").width()*0.56);
slideNub = $(".slide .img").size(); //获取轮播图片数量
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
}
//根据轮播图片数量设定图片位置对应的class
if(slideNub==1){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img3");
}
}
if(slideNub==2){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+3));
}
}
if(slideNub==3){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+2));
}
}
if(slideNub>3&&slideNub<6){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+1));
}
}
if(slideNub>=6){
for(i=0;i<slideNub;i++){
if(i<5){
$(".slide .img:eq("+i+")").addClass("img"+(i+1));
}else{
$(".slide .img:eq("+i+")").addClass("img5");
}
}
}
//根据轮播图片数量设定轮播图按钮数量
if(slideBt){
for(i=1;i<=slideNub;i++){
$(".slide-bt").append("<span data-slide-bt='"+i+"' onclick='tz("+i+")'></span>");
}
$(".slide-bt").width(slideNub*34);
$(".slide-bt").css("margin-left","-"+slideNub*17+"px");
}
//自动轮播
if(autoLb){
setInterval(function(){
right();
}, autoLbtime*1000);
}
if(touch){
k_touch();
}
slideLi();
imgClickFy();
})
//右滑动
function right(){
var fy = new Array();
for(i=0;i<slideNub;i++){
fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
if(i==0){
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
}else{
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]);
}
}
imgClickFy();
slideLi();
}
//左滑动
function left(){
var fy = new Array();
for(i=0;i<slideNub;i++){
fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
if(i==(slideNub-1)){
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
}else{
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]);
}
}
imgClickFy();
slideLi();
}
//轮播图片左右图片点击翻页
function imgClickFy(){
$(".slide .img").removeAttr("onclick");
$(".slide .img2").attr("onclick","left()");
$(".slide .img4").attr("onclick","right()");
}
//修改当前最中间图片对应按钮选中状态
function slideLi(){
var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
$(".slide-bt span").removeClass("on");
$(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on");
}
//轮播按钮点击翻页
function tz(id){
var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
if(tzcs>0){
for(i=0;i<tzcs;i++){
setTimeout(function(){
right();
},1);
}
}
if(tzcs<0){
tzcs=(-tzcs);
for(i=0;i<tzcs;i++){
setTimeout(function(){
left();
},1);
}
}
slideLi();
}
//触摸滑动模块
function k_touch() {
var _start = 0, _end = 0, _content = document.getElementById("slide");
_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) {
left();
_end=0;
}else if(_end > 100){
right();
_end=0;
}
}
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
