对应的css样式
* { margin: 0; padding: 0; } .middle { margin: 0 auto; } li { list-style: none; } a { text-decoration: none; } .head { width: 100%; background: #001529; height: 64px; top: 0px; } body { color: rgba(0, 0, 0, 0.65); } .clear { clear: both; } .nav-content { width: 1160px; height: 100%; font-size: 14px; position: relative; } #logo { position: absolute; left: 0; } .nav-content > ul { width: 574px; height: 46px; display: flex; } .nav-content ul li { font-size: 14px; line-height: 64px; text-align: center; padding: 0px 20px; } .nav-content ul li a { color: #fff; opacity: 0.6; } .nav-content ul li:hover a { opacity: 1; } .loop { width: 1263px; height: 315px; overflow: hidden; position: relative; } .loop-pics { width: 300%; display: flex; position: absolute; } .loop-pics li img { width: 1263px; height: 315px; } #button-left, #button-right { position: absolute; z-index: 2; color: #fff; font-size: 30px; top: 100px; } #button-left { left: 10px; } #button-right { right: 10px; } .onclick { background: #fff !important; width: 24px !important; transition: all 0.5s; } #indicator { position: absolute; bottom: 78px; left: 50%; display: flex; transform: translate(-50%, 0); } #indicator div { width: 16px; height: 3px; border-radius: 1px; background: #cccccc; margin-right: 5px; } .pro { width: 100%; height: 10px; position: absolute; bottom: 58px; background: rgba(255, 255, 240, 0.4); } .pro-content { width: 1px; height: 10px; background: rgba(0, 191, 255, 0.4); position: relative; } .pro-content span { position: absolute; right: 5px; line-height: 10px; font-size: 10px; color: #fff; } .loop-text { width: 100%; height: 58px; position: absolute; bottom: 0px; background: rgba(0, 0, 0, 0.3); } .loop-text > ol { width: 780px; display: flex; margin: 0 auto; } .loop-text ol li { width: 194.55px; height: 58px; text-align: center; color: #fff; cursor: pointer; line-height: 58px; border-left: 1px solid rgba(255, 255, 255, 0.4); } .loop-text img { width: 38.22px; height: 38.22px; vertical-align: middle; margin-right: 10px; } .loop-text ol li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.4); } /* warp */ .warp-box { width: 876.22px; height: 690.7px; color: #000000; margin-top: 10px; background: #f7fafc; } .warp { width: 876.22px; } .warp h2 { font-size: 20px; font-style: normal; } .warp h2 img { width: 12px; height: 17px; vertical-align: middle; margin-right: 20px; } .warp-box h1 { font-weight: normal; } .warp-box .intro { font-style: normal; font-size: 16px; text-align: center; line-height: 30px; color: #87888c; } .warp-ban { width: 524px; height: 397px; overflow: hidden; position: relative; } .warp-ban ul { width: 300%; height: 397px; display: flex; position: absolute; } .warp-ban ul li img { width: 524px; height: 397px; } .warp-ban span { position: absolute; top: 30%; font-size: 30px; color: #ffffff; cursor: pointer; } .rightarr { right: 10px; } .leftarr { left: 10px; } .binds { width: 100%; display: flex; justify-content: space-evenly; margin-top: 20px; } .binds img { width: 76px; height: 76px; } .demo-title { width: 100%; height: 30px; position: relative; margin-top: 30px; } #more { width: 75px; height: 24px; text-align: center; line-height: 24px; color: #487af6; display: inline-block; position: absolute; right: 10px; bottom: -10px; border: 1px solid #487af6; border-radius: 10px; } .demos { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .demos li { width: 266px; border: 1px solid #e8e8e8; margin-bottom: 50px; } .demos li img { width: 266px; height: 279px; } .demos li h3 { font-weight: normal; line-height: 30px; height: 30px; } .demos li p { font-size: 14px; line-height: 20px; } .warp-news { width: 100%; } .news { width: 100%; display: flex; margin-top: 40px; justify-content: space-between; } .news li { width: 270.14px; } .news li img { width: 270.14px; height: 114.02px; border-radius: 5px; } .news li p { width: 90%; text-align: center; line-height: 30px; } .footer { width: 100%; margin-top: 1200px; height: 325px; background: #f7fafc; } .footer .shows { width: 876.22px; height: 325px; } .footer .shows h2 img { width: 12px; height: 17px; vertical-align: middle; } .shows h2 { font-weight: normal; font-size: 18px; } .shows ul li { width: 100%; display: flex; justify-content: space-between; margin-top: 20px; } .shows ul li img { width: 130px; height: 47px; border-radius: 20px; box-shadow: 0 0 10px 2px #ececec; } .root { width: 100%; height: 104px; position: relative; } .root ul { position: absolute; z-index: 2; width: 600px; height: 16px; display: flex; left: 10%; bottom: 20px; justify-content: space-between; } .root ul li { color: #fff; font-size: 14px; } .root-right { width: 380px; height: 68px; position: absolute; right: 5%; bottom: 0px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 240, 0.6); } .root-right p { color: #fff; font-size: 12px; line-height: 30px; } .copy { width: 100%; height: 30px; line-height: 30px; text-align: center; color: #fff; font-size: 12px; border-top: 1px solid #fff; background-color: #5c6679; }利用jq实现轮播功能
$(function () { /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/ $(".loop").mouseenter(function () { $("#button-right,#button-left").css({ opacity: 0.5 }); }); $(".loop").mouseleave(function () { $("#button-right,#button-left").css({ opacity: 0 }); }); var i = 0; var imgWidth = $(".loop ul li img").width(); console.log(imgWidth); var clone = $(".loop ul li").first().clone(true); /*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/ $(".loop ul").append(clone); //get 所有li的个数 var size = $(".loop ul li").length; //一开始循环添加按钮 //所以添加按钮的时候我们也应该添加4个按钮 for (var j = 0; j < size - 1; j++) { $("#indicator").append("<div></div>"); } $("#indicator div").eq(0).addClass("onclick"); /*step 2: */ //左按钮 $("#button-left").click(function () { toLeft(); }); //右按钮 $("#button-right").click(function () { toRight(); }); /*step 3：*/ //按钮指示器鼠标移出移入事件 $("#indicator div").hover( function () { i = $(this).index(); clearInterval(timer); $(".loop ul") .stop() .animate({ left: -i * imgWidth }); $(this).addClass("onclick").siblings().removeClass("onclick"); }, function () { timer = setInterval(function () { toRight(); }, 2000); } ); //两个方向按钮鼠标移出移入事件 $("#button-left,#button-right") .mouseenter(function () { clearInterval(timer); }) .mouseleave(function () { timer = setInterval(function () { toRight(); }, 2000); }); //定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。 var timer = setInterval(function () { toRight(); }, 2000); /*step 2-2*/ //左按钮实现的函数 function toLeft() { //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来 i--; if (i == -1) { $(".loop ul").css({ left: -(size - 1) * imgWidth }); i = size - 2; } $(".loop ul").animate({ left: -i * imgWidth }, 1000); $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick"); } /*step2-2:*/ //右按钮的实现函数 function toRight() { i++; /*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片） 并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置 并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/ if (i == size) { console.log("qq"); $(".loop ul").css({ left: 0 }); i = 1; } $(".loop ul") .stop() .animate({ left: -i * imgWidth }, 1000); //设置下面指示器的颜色索引 if (i == size - 1) { $("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick"); } else { $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick"); } //设置进度条 var sumWidth = $(".loop ul").width(); console.log(sumWidth); let pre = parseFloat((i * imgWidth) / sumWidth).toFixed(2); console.log(pre); $(".pro-content span").html(+pre * 100 + "%"); let pre_length = pre * imgWidth; $(".pro-content").css("width", "" + pre_length + "px"); } }); $(function () { /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/ $(".warp-ban").mouseenter(function () { $(".leftarr,.rightarr").css({ opacity: 1, transform: "translateX(15px)" }); }); $(".loop").mouseleave(function () { $(".leftarr,.rightarr").css({ opacity: 0.4, transform: translateX(0) }); }); var i = 0; var imgWidth = $(".warp-ban ul li img").width(); console.log(imgWidth); var clone = $(".warp-ban ul li").first().clone(true); /*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/ $(".warp-ban ul").append(clone); //get 所有li的个数 var size = $(".warp-ban ul li").length; /*step 2: */ //左按钮 $(".leftarr").click(function () { toLeft(); }); //右按钮 $(".rightarr").click(function () { toRight(); }); //两个方向按钮鼠标移出移入事件 $(".leftarr,.rightarr") .mouseenter(function () { clearInterval(timer); }) .mouseleave(function () { timer = setInterval(function () { toRight(); }, 2000); }); //定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。 var timer = setInterval(function () { toRight(); }, 2000); /*step 2-2*/ //左按钮实现的函数 function toLeft() { //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来 i--; if (i == -1) { $(".warp-ban ul").css({ left: -(size - 1) * imgWidth }); i = size - 2; } $(".warp-ban ul").animate({ left: -i * imgWidth }, 1000); } /*step2-2:*/ //右按钮的实现函数 function toRight() { i++; /*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片） 并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置 并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/ if (i == size) { console.log("qq"); $(".warp-ban ul").css({ left: 0 }); i = 1; } $(".warp-ban ul") .stop() .animate({ left: -i * imgWidth }, 1000); } });