Action_JQ轮播

来源：互联网发布：红蚁网络运维编辑：程序博客网时间：2024/05/21 14:40

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery轮播</title>
<style>
* {
padding: 0;
margin: 0;
}
#slideBox {
width: 100%;
overflow: hidden;
}

#slide {
width: 980px;
height: 335px;
position: relative;
margin: 0 auto;
}

#slide ul li {
list-style-type: none;
width: 980px;
height: 335px;
position: absolute;
}

#btnPrev, #btnNext {
width: 46px;
height: 131px;
color: #333;
font-size: 18px;
position: absolute;
z-index: 9999;
cursor: pointer;
filter:alpha(opacity=50);
opacity: 0.5;
}

#btnPrev:hover, #btnNext:hover {
filter:alpha(opacity=100);
opacity: 1;
}

#btnPrev {
left: -100px;
background: url(http://cdn.attach.qdfuns.com/notes/pics/201703/14/165801y950yzz1z130s9z0.png) no-repeat center top;
}
#btnNext {
right: -100px;
background: url(http://cdn.attach.qdfuns.com/notes/pics/201703/14/165801cnznghplj7rrjgol.png) no-repeat center top;
}
#slideTab {
position: absolute;
bottom: 12px;
width: 240px;
height: 1px;
margin: 0 auto;
}
#slideTab a{
display:block;
background:#000;
float:left;
height:1px;
overflow:hidden;
z-index:9999;
}
#slideTab .TabOn{
background:#fff;
}
#slide .blur {
position: absolute;
width: 980px;
height: 335px;
background: #fff;
top: 0px;
z-index: 99;
filter:alpha(opacity=95);
opacity: 0.95;
}
</style>
</head>
<body>
<div id="slideBox">
<div id="slide">
<ul>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201703/14/165801lasr7q7o9eh8rqqa.jpg"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201703/14/165801b8cqfbeboqm6bw2f.jpg"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201703/14/165801v9iis9jj2x4piij9.jpg"></li>
</ul>

<a id="btnPrev"></a>
<a id="btnNext"></a>
<div id="slideTab"></div>
<div id="blurLeft" class="blur"></div>
<div id="blurRight" class="blur"></div>
</div>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
var boxWidth = $("#slide").width(); //获取幻灯片外部div的宽度
var boxHeight = $("#slide").height(); //获取幻灯片外部div的高度
var slideWidth = $("#slide").width(); //slide区域的宽度

var liWidth = $("#slide").children("ul").children("li").eq(0).width(); //获取幻灯片li的宽度
var liNum = $("#slide").find('li').length; //获取幻灯片li的数量

var btnHeight = $("#btnPrev").height(); //获取按钮高度

var slideTabWidth = $(slideTab).width(); //整个tab条的宽度
var tabWidth = (1/liNum)*100; //每一个tab宽度
var tabContent = ""; //初始化tab按钮

var speed = 5000; //滚动速度

$("#slideTab").css("left",(slideWidth-slideTabWidth)/2); //slideTab定位
$("#btnPrev").css("top",(boxHeight-btnHeight)/2); //prev按钮定位
$("#btnNext").css("top",(boxHeight-btnHeight)/2); //next按钮定位

$("#blurLeft").css("left",-liWidth); //左右两边的模糊区定位
$("#blurRight").css("right",-liWidth);

//slideTab条的状态设置
for (var i = 0; i < liNum; i++) {
$("#slide").children("ul").children("li").eq(i).css("left",(i-1)*liWidth); //初始化每个li的位置

if(i == 1) { //如果是正好显示的图片
tabContent = tabContent + "<a class='"+"TabOn' id='"+"TabOn"+i+"' style='width:"+tabWidth+"%'></a>";
}else {
tabContent = tabContent + "<a id='"+"TabOn"+i+"' style='width:"+tabWidth+"%'></a>";
}
}
$("#slideTab").html(tabContent); //写入tab按钮

//设置自动滚动效果
var slideRun = setInterval(slideNext,speed);
//向后滑动
function slideNext() {
for(var k = 0; k < liNum; k++) {
if(parseInt($("#slide").children("ul").children("li").eq(k).css("left")) == 0) { //判断li是否有位移到0，防止同时多次点击出错
var liSeat = 0; //位置参数归零
for(var j = 0; j < liNum; j++) {
if(parseInt($("#slide").children("ul").children("li").eq(j).css("left")) == -liWidth){ //判断是否是第一个(即所有li中的第一个，但对next来讲是第一个)
$("#slide").children("ul").children("li").eq(j).css("left",liWidth*(liNum - 2)); //第一个回到最后一个
}else{
liSeat=parseInt($("#slide").children("ul").children("li").eq(j).css("left")) - liWidth; //若不是第一个，则向左滑动一个li宽度
$("#slide").children("ul").children("li").eq(j).animate({left:liSeat},"slow"); //进行位移动画
}
}
}
}
}

//向前滑动
function slidePrev() {
for(var k = 0; k < liNum; k++) {
if(parseInt($("#slide").children("ul").children("li").eq(k).css("left")) == 0) { //判断li是否有位移到0，防止同时多次点击出错
var liSeat = 0; //位置参数归零
for(var j = 0; j < liNum; j++) {
if(parseInt($("#slide").children("ul").children("li").eq(j).css("left")) == liWidth*(liNum-2)) { //判断是否是第一个(即所有li中的最后一个，但对prev来讲是第一个)
$("#slide").children("ul").children("li").eq(j).css("left",-liWidth); //第一个回到最后一个
}else{
liSeat = parseInt($("#slide").children("ul").children("li").eq(j).css("left")) + liWidth; //若不是第一个，则向右滑动一个li宽度
$("#slide").children("ul").children("li").eq(j).animate({left:liSeat},"slow"); //进行位移动画
}
}
}
}
}

setInterval(function(){
for(var n = 0;n < liNum; n++){
if(parseInt($("#slide").children("ul").children("li").eq(n).css("left")) == 0){
if((n-1)<0){ //第一个li
$("#TabOn"+(liNum-1)).removeClass("TabOn");
$("#TabOn"+(n+1)).removeClass("TabOn");
$("#TabOn"+n).addClass("TabOn");
}else {
$("#TabOn0").removeClass("TabOn");
$("#TabOn"+(n-1)).removeClass("TabOn");
$("#TabOn"+(n+1)).removeClass("TabOn");
$("#TabOn"+n).addClass("TabOn");
}
}
}
},1)

$("#btnNext").click(slideNext);//下一张按钮
$("#btnPrev").click(slidePrev);//上一张按钮
$("#slideBox").mouseenter(function(){clearInterval(slideRun)});//鼠标在幻灯片上，停止滚动
$("#slideBox").mouseleave(function(){slideRun = setInterval(slideNext,speed)})//鼠标不在幻灯片上，开始滚动
})
</script>
</body>
</html>

0 0