jq轮播-白红宇

jq轮播

阅读量：6984 次

发布时间：2019-06-27

本文共 4931 字，大约阅读时间需要 16 分钟。

<!DOCTYPE html>

<html>

<head>

<title>慧招网-专业的招商引资服务平台</title>

<style>

*{margin: 0; padding: 0;}

ul,li{list-style: none;}

.slide-wrap{margin: 0 auto; width: 500px; text-align: center;}

.slide-box{position: relative; width: 500px;height: 300px; overflow: hidden;}

.slide-box ul{position: absolute; left: 0; top: 0; overflow: hidden; height: 300px;}

.slide-box li{float: left; width: 500px;height: 300px; overflow: hidden;}

.slide-box li img{ width: 500px;height: 300px;}

.slide-pagination span{display: inline-block; margin-top: 20px; padding: 0 15px; font-size: 20px; cursor: pointer;}

.hd{margin: 20px;}

.hd li{display: inline-block; margin: 0 5px; border-radius: 20px; font-size: 12px; width: 20px; height: 20px; line-height: 20px; text-align: center; color: #666; background: #ccc; cursor: pointer; font-weight: 100;}

.hd li.active{color: #fff; background: #f40;}

.count{margin: 0 auto; display: inline-block; text-align: center;}

.count span{display: inline-block; padding: 0 5px; font-size: 16px;}

.thumb{width: 500px; margin: 20px auto;}

.thumb ul{overflow: hidden;}

.thumb li{float: left; margin-right: 20px; width: 100px; height: 60px; cursor: pointer; border: 2px solid #fff;}

.thumb li.active{border: 2px solid #f40;}

.thumb li img{width: 100%; height: 100%;}

</style>

</head>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</div>

var first = $(".slide-box li").first();

var last = $(".slide-box li").last();

var ul = $(".slide-box ul");

var liLength = ul.children().length;

var index = 0;

$(ul).append(first.clone());

$(ul).prepend(last.clone());

ul.width(first.width() * ul.children().length);//这步一定要在追加之后写，否则就会出现某张图不显示的bug

$(ul).css("left","-500px");

$(".j-all-length").text(liLength);

var flag = false;

$(".next").click(function(){

next();

})

$(".prev").click(function(){

prev();

})

function next(n){

if(flag) return;//动画中就return

flag = true;

$(ul).stop().animate({

left: "-=500px"

},function(){

index++;

console.log(index);

if(index === liLength){

$(ul).css("left","-500px");

index = 0;

}

flag = false;//执行完之后

currentIndex();//底部的索引小按钮

$(".j-index").text(index+1);

})

}

function prev(){

if(flag) return;//动画中就return

flag = true;

$(ul).stop().animate({

left: "+=500px"

},function(){

index--;

console.log(index);

if(index < 0){

$(ul).css("left",-(liLength*first.width()));

index = liLength - 1;//下标的原因

}

flag = false;//执行完之后

currentIndex();//底部的索引小按钮

$(".j-index").text(index+1);

})

}

function currentIndex(){//只需要找到当前index的索引

$(".hd li").removeClass("active").eq(index).addClass("active");

$(".thumb li").removeClass("active").eq(index).addClass("active");

}

$(".hd li").hover(function(){

var iEq = $(this).index();//0,1,2

$(this).addClass("active").siblings().removeClass("active");

$(ul).stop().animate({

"left": -(iEq+1) * first.width()

});

index = iEq;

console.log(index);

$(".j-index").text(iEq+1);

$(".thumb li").removeClass("active").eq(index).addClass("active");

})

$(".thumb li").click(function(){

var iEq = $(this).index();//0,1,2

$(this).addClass("active").siblings().removeClass("active");

$(ul).stop().animate({

"left": -(iEq+1) * first.width()

});

index = iEq;

console.log(index);

$(".j-index").text(iEq+1);

$(".hd li").removeClass("active").eq(index).addClass("active");

})

var timer = setInterval(function(){

next();

},1000)

</script>

</body>

</html>

转载于:https://my.oschina.net/parchments/blog/1944018

你可能感兴趣的文章

Struts2--Action属性接收参数

leetcode 283. Move Zeroes

查看>>

自己的php函数库

查看>>

HDU Problem 1599 find the mincost route 【Floyd求最小环】

查看>>

HDU2017多校联合 contest 1

查看>>

基于DevExpress实现对PDF、Word、Excel文档的预览及操作处理（转载自：http://www.cnblogs.com/wuhuacong/p/4175266.html）...

【Python3爬虫】自动查询天气并实现语音播报

查看>>

新的公司

查看>>

【JavaScript】02.基础语法学习

查看>>

自行学习XAML控件后的简单想法（作业一）