图片轮播的html代码
<div id="banner"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="banner_list"> <a target="_blank"><img src="images/banner1.png" title="" alt=""/> <span id="sc-download"><img src="images/download.png"><p>下载集趣APP</p></span> <span id="sc-downloadwhite"><img src="images/downloadwhite.png"><p>下载集趣APP</p></span></a> <a target="_blank"><img src="images/banner2.png" title="" alt=""/></a> <a target="_blank"><img src="images/banner3.png" title="" alt=""/></a> <a target="_blank"><img src="images/banner4.png" title="" alt=""/></a> </div> </div>
图片轮播的js
var t = n = 0, count; $(document).ready(function () { count = $("#banner_list a").length; $("#banner_list a:not(:first-child)").hide(); $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); $("#banner_info").click(function () { window.open($("#abanner_list a:first-child").attr('href'), "_blank") }); $("#banner li").click(function () { var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4 n = i; if (i >= count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr('href'), "_blank") }); $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); document.getElementById("banner").style.background = ""; $(this).toggleClass("on"); $(this).siblings().removeAttr("class"); }); t = setInterval("showAuto()", 2000); $("#banner").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 2000); }); }) function showAuto() { n = n >= (count - 1) ? 0 : ++n; $("#banner li").eq(n).trigger('click'); //浏览页图片轮播结束 }
图片轮播的CSS样式,根据需要调整
/*轮播*/ #banner { position: relative; width: 100%; height: 522px; overflow: hidden; margin: 0; cursor: pointer; } #banner_list img { border: 0px; width: 100%; height: 522px; } #banner_bg { position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px; } #banner_info { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer } #banner_text { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; } #banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1; margin: 0; left: 50%; width: 90px; margin-left: -45px; padding: 0; bottom: 3px; top: 500px; } #banner ul li { width: 15px; height: 15px; float: left; margin-left: 5px; font-size: 0px; display: block; color: #FFF; background: #aaaaaa; cursor: pointer; border-radius: 50%; } #banner ul li.on { background: white; } #banner_list a { position: absolute; width: 100%; } #sc-download { width: 195px; height: 52px; position: absolute; top: 302px; left: 25%; z-index: 11; border-radius: 9px; background-color: #FAFCFE; } #sc-download img { width: 20px; height: 20px; position: relative; float: left; margin-left: 28px; top: 50%; margin-top: -10px; } #sc-download p { width: 125px; height: 52px; position: relative; margin-left: 58px; font-size: 20px; color: #333333; line-height: 52px; font-weight: 500; } #sc-downloadwhite { display: none; width: 195px; height: 52px; position: absolute; top: 302px; left: 25%; z-index: 11; border-radius: 9px; background-color: #52CFFE; } #sc-downloadwhite img { width: 20px; height: 20px; position: relative; float: left; margin-left: 28px; top: 50%; margin-top: -10px; } #sc-downloadwhite p { width: 125px; height: 52px; position: relative; margin-left: 58px; font-size: 20px; color: #ffffff; line-height: 52px; font-weight: 500; }
加油