轮播图进度条同步切换(参考漫威官网)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/jquery-1.12.2.js"></script><style>/* 去除常用标签的margin  padding值 */div,h1,h2,h3,h4,h5,h6,ul,li,p,body {margin: 0;padding: 0;}/* 去除a链接的下划线 */a {text-decoration: none;}/* 去除无序列表前的黑点 */ul {list-style: none;}/* 设置左右浮动 */.lt {float: left;}.rt {float: right;}/* 解决margin-top对父元素的影响 */.clearmargin::before {content: "";display: table;}/* 解决浮动元素对父元素产生的高度塌陷 */.clearbox::after {display: block;content: "";clear: both;}/* 版心大小 */.w {width: 1200px;margin: 0 auto;}img {vertical-align: middle;}/* 轮播进度条部分 start*//* 轮播图部分 */.progress-Carousel {position: relative;}.progress-Carousel .carousel_floor {position: relative;width: 100%;height: 432px;background-color: aqua;}.carousel_floor li {display: none;}.carousel_floor li:nth-child(1) {display: block;background: url(../images/disneyplus_0412-mas_dsk_01.jpg) no-repeat;}.carousel_floor li:nth-child(2) {background: url(../images/ew_0410-mas_dsk_02.jpg) no-repeat;}.carousel_floor li:nth-child(3) {background: url(../images/avnendgamepressconf_mas_dsk_01.jpg) no-repeat;}.carousel_floor li:nth-child(4) {background: url(../images/04.08-houseofx-mas-dsk-01.jpg) no-repeat;}.carousel_floor li:nth-child(5) {background: url(../images/avengersendgame_lob_mas_dsk_01_0.jpg) no-repeat;}.progress-Carousel .carousel_floor li {position: absolute;width: 100%;height: 432px;background-color: red;background-size: 100% auto;color: #fff;}.progress-Carousel .carousel_floor .w {margin-top: 100px;}.progress-Carousel .carousel_floor li h1 {font-weight: 400;font-size: 50px;}.progress-Carousel .carousel_floor li a {position: relative;display: block;text-align: center;width: 126px;height: 48px;line-height: 48px;background-color: #e62429;color: #fff;font-weight: 700;margin-top: 20px;}.progress-Carousel .carousel_floor li a:hover span {background-color: rgba(0, 0, 0, 0.3);}.progress-Carousel .carousel_floor li span {position: absolute;top: 0;width: 126px;height: 48px;display: block;}/* 进度条部分 */.progress_floor {position: relative;margin-top: -50px;}.progress_floor ul {width: 957px;padding-left: 20px;background-color: #fff;}.progress_floor ul li {float: left;}.progress_floor ul li span {display: block;height: 6px;width: 0px;background-color: #e62429;}.progress_floor ul li strong {display: block;font-size: 14px;color: #151515;width: 161.2px;font-weight: 700;padding: 14px 30px 20px 0;cursor: pointer;}/* 轮播进度条部分 end*/</style><script>// 进度条轮播部分$(function () {var i = 0;// 自动播放$(".progress_floor ul>li:eq(" + i + ")").children("strong").css({ "color": "red" }).end().children("span").stop().animate({ "width": "191.2px" }, 4000, function () {i++;    //1if (i == 5) {i = 0;}$(".carousel_floor li:eq(" + i + ")").fadeIn(500);$(".carousel_floor li:eq(" + i + ")").siblings().fadeOut(500);$(".progress_floor ul>li:eq(" + i + ")").siblings().children("strong").css("color", "#151515");$(".progress_floor ul>li:eq(" + i + ")").siblings().children("span").css("width", "0");$(".progress_floor ul>li:eq(" + i + ")").children("strong").css({ "color": "red" });$(".progress_floor ul>li:eq(" + i + ")").children("span").stop().animate({ "width": "191.2px" }, 4000, arguments.callee);});// 鼠标点击$(".progress_floor ul>li").click(function () {var index = $(this).index();$(this).siblings().children("strong").css("color", "#151515").end().children("span").stop().css("width", "0");$(this).siblings().children("span").stop();$(this).children("strong").css("color", "red").end().children("span").stop().animate({ "width": "191.2px" }, 4000);$(".carousel_floor li:eq(" + index + ")").fadeIn(500);$(".carousel_floor li:eq(" + index + ")").siblings().fadeOut(500);// 鼠标点击后继续执行自动播放$(".progress_floor ul>li:eq(" + index + ")").children("strong").css({ "color": "red" }).end().children("span").stop().animate({ "width": "191.2px" }, 4000, function () {index++;    //1if (index == 5) {index = 0;}$(".carousel_floor li:eq(" + index + ")").fadeIn(500);$(".carousel_floor li:eq(" + index + ")").siblings().fadeOut(500);$(".progress_floor ul>li:eq(" + index + ")").siblings().children("strong").css("color", "#151515");$(".progress_floor ul>li:eq(" + index + ")").siblings().children("span").stop().css("width", "0");$(".progress_floor ul>li:eq(" + index + ")").children("strong").css({ "color": "red" });$(".progress_floor ul>li:eq(" + index + ")").children("span").stop().animate({ "width": "191.2px" }, 4000, arguments.callee);});});});</script>
</head><body><div class="progress-Carousel"><div class="carousel_floor"><ul><li><div class="w"><img src="data:images/svod_logo_white-homepage.png" alt=""><h1>所有奇迹迪士尼+新闻</h1><p>您需要了解Marvel的新项目在一个地方进入迪士尼+所需的一切</p><a href="#">学到更多<span></span></a></div></li><li><div class="w"><img src="data:images/avengersendgame_lob_log_01_0.png" alt=""><h1>娱乐周刊封面</h1><p>查看EW的六个新封面,庆祝原来的六个复仇者联盟,</p><a href="#">看更多<span></span></a></div></li><li><div class="w"><img src="data:images/avengersendgame_lob_log_01_0.png" alt=""><h1>复仇者联盟:餐具新闻发布会</h1><p>当复仇者联合联合起来谈论漫威工作室的复仇者联盟时,发生了一切:Endgame,</p><a href="#"><span></span></a></div></li><li><div class="w"><img src="data:images/avengersendgame_lob_log_01_0.png" alt=""><h1>独家：新漫画将于今年七月开始</h1><p>从X战警到银河守护者的路上,可以预览新书!</p><a href="#">学到更多<span></span></a></div></li><li><div class="w"><img src="data:images/avengersendgame_lob_log_01_0.png" alt=""><h1>门票现在出售</h1><p>看看Marvel Studios的复仇者联盟的最新预告片:Endgame。门票现已上市</p><a href="#" class="lt" style="margin-right:20px;">现在看<span></span></a><a href="#" class="lt">买票<span></span></a></div></li></ul></div><div class="progress_floor"><div class="w"><ul class="clearbox"><li><span></span><strong>所有奇迹迪士尼+新闻</strong></li><li><span></span><strong>娱乐周刊封面</strong></li><li><span></span><strong>复仇者联盟:餐具新闻发布会</strong></li><li><span></span><strong>独家：新漫画将于今年七月开始</strong></li><li><span></span><strong>门票现在出售</strong></li></ul></div></div></div>
</body></html>

轮播图进度条同步切换(参考漫威官网)相关推荐

JS轮播图（点击切换、自动播放、悬停控制）
JS轮播图轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图使用了swiper插件,可手动滑动切换也可自动切换效果图 css代码只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
js轮播图(点击图片切换定时器效果)
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换不说别的直接上代码 <!DOCTYPE html> <html> <head><titl ...
JS轮播图（左右箭头切换、按钮切换、自动轮播）
const LEFT = Symbol(),RIGHT = Symbol(),FINISH_TIME = 200;var arr = [{date: "22/Feb.2022",t ...
微信小程序种利用轮播图实现tab栏切换
js文件 navList: ['推荐', '视频', '热点', '娱乐'],idx: 0},handleChange (e) {var idx = e.target.dataset.idxthis. ...
JavaScript随手笔记---轮播图（点击切换）
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
小程序倒计时轮播图、导航切换轮播
最近项目需要实现轮播图有倒计时圆点然后自动切换图片加导航点击切换轮播内容的需求,项目结束,在这里总结一下先上效果图,让各位兄弟看看是不是也符合各自需要的那种需求,相互学习我是把这写在一个组件里面的 ...

轮播图进度条同步切换(参考漫威官网)

轮播图进度条同步切换(参考漫威官网)

轮播图进度条同步切换(参考漫威官网)相关推荐

最新文章

热门文章