前端jq轮播图无缝切换

2018web前端开发框架

ui java web前端开发框架有哪些

前端开发框架 exitjs

html 代码

<!DOCTYPE html>

<html>

<head>

<title>banner</title>

<style>

body{margin:0;padding: 0;}

.main{position:relative;width:1200px;height:490px;margin:auto;overflow:hidden;}

.box{position:absolute;overflow:hidden;height:490px;top:0;left:0;}

.box>div{float:left;}

.box>divimg{width:1200px;height:490px;}

.btn{position:absolute;bottom:10px;left:50%;margin-left:-52px;;}

.btn>span{width:15px;height:15px;background:#FFF;display:inline-block;border-radius:50%;cursor:pointer;margin-left:12px;}

.btn.active{background:none;border-radius:50%;border:solid1px#fff}

.prev{width:40px;height:40px;background:#000000;opacity:0.7;position:absolute;top:50%;left:0;color:#fff;text-align:center;

line-height:40px;margin-top:-20px;font-weight:bold;font-size:18px;cursor:pointer;display:none;z-index:111;}

.next{width:40px;height:40px;background:#000000;opacity:0.7;position:absolute;top:50%;right:0;color:#fff;text-align:center;

line-height:40px;margin-top:-20px;font-weight:bold;font-size:18px;cursor:pointer;display:none;z-index:111;}

</style>

</head>

<body>

</div>

</div>

<</div> <div class=”next”>>

</div>

var timer = null;//定时器

var index = 0;//索引值

$(function () {

$(“.main”).hover(function () {//鼠标移入关闭定时器

clearInterval(timer);

$(“.prev”).fadeIn();

$(“.next”).fadeIn();

}, function () {//鼠标移出开启定时器

timer = setInterval(function () {

index++;

autoplay();

}, 1500);

$(“.prev”).fadeOut();

$(“.next”).fadeOut();

})

var clone = $(“.box>div”).eq(0).clone();//克隆第一张图片

$(“.box”).append(clone);//复制到列表最后

var size = $(“.box>div”).size();//获取到图片的总数量

for (var i = 0; i < size – 1; i++) {//循环添加跟图片数量相等按钮数量

$(“.btn”).append(“<span></span>”);

}

$(“.btn”).children().eq(0).addClass(“active”);//给第一个按钮添加当前的样式

var $imgWidth = $(“.box>div”).eq(0).width();

$(“.box”).width($imgWidth * size);//box的总宽度

timer = setInterval(function () {

index++;

autoplay();

}, 1500);

function autoplay() {

if (index == size) {

$(“.box”).css({ “left”: 0 });

index = 1;

}

if (index == size – 1) {//当index等于图片的数量-1的时候第一个按钮的样式为当前样式

$(“.btn”).children(“span”).eq(0).addClass(“active”).siblings().removeClass(“active”);

} else {

$(“.btn”).children(“span”).eq(index).addClass(“active”).siblings().removeClass(“active”);

}

$(“.box”).stop().animate({ “left”: -$imgWidth * index }, 500)//图片向右切换

}

//下一张

$(“.next”).on(“click”, function () {

index++

autoplay();

})

//上一张

$(“.prev”).on(“click”, function () {

index–;

if (index == -1) {//当index<0的时候就走最后面那张

$(“.box”).css({ “left”: -(size – 1) * $imgWidth });

index = size – 2;

}

autoplay();

})

$(“.btn>span”).on(“click”, function () {

var $index = $(this).index();//当前的索引值

index = $index;//把当前的索引值赋值给index以便鼠标移出的时候接着走后面那张图片

$(this).addClass(“active”).siblings().removeClass(“active”);

$(“.box”).stop().animate({ “left”: -$imgWidth * $index });

})

</script>

</body>

</html>

web前端开发框架搭建视频教程

前端h5开发框架

前端开发有哪几大框架

前端jq轮播图无缝切换

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发