html:
<div id="My_supersilde"> <!-- banner --> <ul id="list-img"> <li data-image="images/nth1.jpg"><a href=""></a></li> <li data-image="images/nth1.jpg"><a href="one_paper.html"></a></li> <li data-image="images/nth1.jpg"><a href=""></a></li> <li data-image="images/nth1.jpg"><a href=""></a></li> <li data-image="images/nth1.jpg"><a href="page_nth5.html"></a></li> <li data-image="images/nth1.jpg"><a href="page_nth6.html"></a></li> </ul> <div id="hover-list"> <ul> <li class="on"><a href="" title="网站改版">网站改版</a></li> <li><a href="one_paper.html" title="移动版本">移动版本</a></li> <li><a href="" title="预约理财">预约出借</a></li> <li><a href="" title="合同存证">合同存证</a></li> <li><a href="page_nth5.html" title="票据理财">票据出借</a></li> <li><a href="page_nth6.html" title="邀请奖励">邀请奖励</a></li> </ul> </div> <div class="btn-arrow"> <a href="javascript:void (0);" id="prev" class="arrow arrow-prev"></a> <a href="javascript:void (0);" id="next" class="arrow arrow-next"></a> </div> </div>css:
#My_supersilde {position: relative;width: 100%;height: 400px} #list-img {position: absolute;width: 100%;height: 400px;} #list-img li {width: 100%;height: 100%;display: none;background:center 0 no-repeat;position: absolute;left: 0;top: 0} #list-img li a{display: block;width: 100%;height: 100%} #list-img li.on{display: block;} #hover-list {position: absolute;bottom: 0;left: 0px;right: 0;z-index: 2;text-align: center;width: 1180px;margin: auto} #hover-list ul {margin-left: 350px;} #hover-list li {line-height: 30px;padding: 5px 15px;background-color: rgba(0,0,0,0.5);font-size: 14px;margin-right: 20px;border-radius: 4px 4px 0px 0px;} #hover-list li a{color: #ffffff;} #hover-list li+li{margin-left: 5px} #hover-list li.on {background-color: rgba(0,0,0,0.8);} #hover-list li.on a{color: #fc4d4d;} .btn-arrow{width: 1200px;margin:auto;position: absolute;top: 60%;left: 0;right: 0} @media (max-width: 1400px){ .btn-arrow{display: none} } .arrow {position: absolute;top: 50%;margin-top: -25px;z-index: 2;display: none;width: 50px;height: 50px;cursor: pointer;transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;-o-transition: 0.3s} .arrow.arrow-prev{background: url(../images/jiantou-L.png) -70px 0 no-repeat;left: -100px} .arrow.arrow-next{background: url(../images/jiantou.png) no-repeat;right: -100px} .arrow.arrow-prev:hover{background-position: 0 0} .arrow.arrow-next:hover{background-position: -70px 0} #My_supersilde:hover .arrow {display: block;}jQuery:
(function () { var i = 0; var My_supersilde = $("#My_supersilde"); var Size = $("#list-img li").size(); var list_img = $("#list-img li"); var $Num_li = $("#hover-list ul li"); var data_image = list_img.eq(0).attr("data-image"); var $prev = $("#prev"); var $next = $("#next"); list_img.eq(0).css("background-image", "url(" + data_image + ")").addClass("on"); $Num_li.each(function (j) { $(this).mouseenter(function () { var data_image2 = list_img.eq(j).attr("data-image"); list_img.eq(j).css("background-image", "url(" + data_image2 + ")").addClass("on").siblings().removeClass("on"); $(this).addClass("on").siblings().removeClass("on"); i = j }) }); var time = setInterval(toggle, 4000); function toggle() { i++; if (i === Size) { i = 0 } var data_image2 = list_img.eq(i).attr("data-image"); $Num_li.eq(i).addClass("on").siblings().removeClass("on"); list_img.eq(i).addClass("on").css("background-image", "url(" + data_image2 + ")").siblings().removeClass("on") } function toggle_change() { i--; if (i === -1) { i = Size - 1 } var data_image2 = list_img.eq(i).attr("data-image"); $Num_li.eq(i).addClass("on").siblings().removeClass("on"); list_img.eq(i).addClass("on").css("background-image", "url(" + data_image2 + ")").siblings().removeClass("on") } My_supersilde.mouseover(function () { clearInterval(time) }); My_supersilde.mouseout(function () { time = setInterval(toggle, 4000) }); $prev.click(function () { toggle_change() }); $next.click(function () { toggle() }) })();
