草稿

最新推荐文章于 2021-01-10 04:30:52 发布

林间风雨

最新推荐文章于 2021-01-10 04:30:52 发布

阅读量161

点赞数

分类专栏： HTML 文章标签： HTML CSS JQuery 自动轮播图片切换

本文链接：https://blog.csdn.net/jack_rose_me/article/details/109221300

版权

HTML 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>自动轮播 Jquery</title>

</script>

$(function () {

//动态添加数字浮标

var imgNum = $(".img li").size();

for (var i = 1; i <= imgNum; i++) {

$(".num").append("<li>" + i + "</li>");

}

$(".img li").eq(0).fadeIn(300);

$(".num li").eq(0).addClass("active");

//数字浮标的焦点事件

$(".num li").mousemove(function () {

if (!$(this).hasClass("active")) {

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

idx = $(this).index();

$(".img li").eq(idx).stop().fadeIn(300).siblings().stop().fadeOut(300);

}

});

//显示向左移动图标

$(".shade_left").hover(function () {

$(".out .left").stop().fadeIn();

}, function () {

$(".out .left").stop().fadeOut();

});

//显示向右移动图标

$(".shade_right").hover(function () {

$(".out .right").stop().fadeIn();

}, function () {

$(".out .right").stop().fadeOut();

});

//转移图片的a标签的click事件

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

location.href = $(".img li:visible a").attr("href");

});

//手动向左移动

$(".out .btn.left").click(function (e) {

move(-1);

e.stopPropagation();

});

//手动向右移动

$(".out .btn.right").click(function (e) {

move();

e.stopPropagation();

});

//自动轮播

var idx = 0;

var timer = setInterval(move, 1000);

function move(left) {

if (left) { //向左移动

idx--;

if (idx == -1) {

idx = imgNum - 1;

}

} else {

idx++;

if (idx == imgNum) {

idx = 0;

}

$(".num li").eq(idx).addClass("active").siblings().removeClass("active");

$(".img li").eq(idx).stop().fadeIn(300).siblings().stop().fadeOut(300);

}

//图片获取焦点时，停止自动轮播

$(".out").hover(function () {

clearInterval(timer);

}, function () {

timer = setInterval(move, 1000);

});

</script>

<style>

/* * {

padding: 0;

margin: 0;

}

@media (min-width: 1200px) {

.out {

width: 1140px;

}

@media (min-width: 992px) {

.out {

width: 970px;

}

@media (min-width: 768px){

.out {

width: 750px;

}

img {

width: 800px;

height: 600px;

}

ul li {

list-style: none;

}

.out {

margin: 50px auto;

width: 800px;

height: 600px;

position: relative;

}

.out .shade {

position: absolute;

top: 0;

width: 50%;

height: 100%;

background-color: rgba(0, 0, 0, 0);/*不能使用opacity，不然会被子元素继承(会忽视子元素所设置的background-color: opacity)*/

/*pointer-events: auto;*/

/* }

.out .shade_left {

left: 0;

}

.out .shade_right {

right: 0;

}

.out .img li {

position: absolute;

top: 0;

left: 0;

display: none;

/*pointer-events: none; //该层会将事件会传给下面一个层（z-index小于他的层） */

/* }

.out .num {

position: absolute;

font-size: 0;

bottom: 10px;

width: 100%;

text-align: center;

}

.out .num li {

width: 20px;

height: 20px;

background-color: #777;

color: #fff;

line-height: 20px;

text-align: center;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

display: inline-block;

font-size: 13px;

margin: 0 3px;

cursor: pointer;

}

.out .num li.active {

background-color: #b92c28;

}

.out .btn {

position: absolute;

top: 50%;

margin-top: -50px;

color: #fff;

height: 100px;

line-height: 100px;

width: 50px;

background-color: rgba(0, 0, 0, 0.2);

font-size: 40px;

text-align: center;

cursor: pointer;

display: none;

}

.out .left {

left: 0;

}

.out .right {

right: 0;

} */

.footer {

position: relative;

padding-top: 521px;

min-height: 276px;

background: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/ft2_7b14393.webp) no-repeat center top;

background-color: #86a5d3;

}

.west-01 {

position: absolute;

width: 200px;

height: 180px;

left: 50%;

margin-left: -398px;

top: 352px;

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_01_3ca39fe.png);

background-repeat: no-repeat;

-webkit-animation: play01 1.4s steps(8) infinite;

-moz-animation: play01 1.4s steps(8) infinite;

-ms-animation: play01 1.4s steps(8) infinite;

animation: play01 1.4s steps(8) infinite;

}

.west-02 {

position: absolute;

width: 200px;

height: 180px;

left: 50%;

margin-left: -198px;

top: 356px;

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_02_47bad19.png);

background-repeat: no-repeat;

-webkit-animation: play02 1.4s steps(8) infinite;

-moz-animation: play02 1.4s steps(8) infinite;

-ms-animation: play02 1.4s steps(8) infinite;

animation: play02 1.4s steps(8) infinite;

}

.west-03 {

position: absolute;

width: 170px;

height: 240px;

left: 50%;

margin-left: -11px;

top: 326px;

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_03_f962447.png);

background-repeat: no-repeat;

-webkit-animation: play03 1.4s steps(8) infinite;

-moz-animation: play03 1.4s steps(8) infinite;

-ms-animation: play03 1.4s steps(8) infinite;

animation: play03 1.4s steps(8) infinite;

}

.west-04 {

position: absolute;

width: 210px;

height: 200px;

left: 50%;

margin-left: 198px;

top: 372px;

background-image: url(https://xyq.res.netease.com/pc/gw/20170118103441/img/west_04_6516d80.png);

background-repeat: no-repeat;

-webkit-animation: play04 1.4s steps(8) infinite;

-moz-animation: play04 1.4s steps(8) infinite;

-ms-animation: play04 1.4s steps(8) infinite;

animation: play04 1.4s steps(8) infinite;

}

</style>

</head>

<body>

<!-- <div class="out">

</ul>

</div>

</div>

</div> -->

</div>

</body>

</html>

林间风雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
草稿

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>自动轮播Jquery</title><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>...
复制链接

扫一扫