首页banner特效
<link href="css/swiper.min.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<div class="swiper-container">
<div class="swiper-wrapper" id="idContainer2">
<asp:Repeater runat="server" ID="rptBanner">
<ItemTemplate>
<div class="swiper-slide" style='display: <%#Container.ItemIndex == 0 ? "block" : "none" %>'>
<a href="<%#Eval("Linkurl") %>" target="_blank">
<img src="<%# globalVariables.FileDir+Eval("GlobalPicBig3") %>">
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="swiper-pagination">
</div>
<div class="wrapperLunbo">
<ul>
<asp:Repeater ID="rptDot" runat="server">
<ItemTemplate>
<li class="<%#Container.ItemIndex == 0 ? "wrapperLunboCurrent" : "" %>" onclick="bannerPoint(this)">
<a href="javascript:void(0)"></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div class="swiper-button-next" id="bannerNext" onclick="bannerPrev()">
</div>
<div class="swiper-button-prev" id="bannerPrev" onclick="bannerNext()">
</div>
</div>
<script type="text/javascript">
$(window).scroll(function () {
var firstScreen = $(".BrandBox").offset().top - $(document).scrollTop();
if (firstScreen <= 687 && firstScreen > 300)
{ menuPoint(0); }
var secondScreen = $(".contentTitleAll").offset().top - $(document).scrollTop();
if (secondScreen <= 300 && secondScreen > -300)
{ menuPoint(1); }
var thirdScreen = $(".showSImgBox").offset().top - $(document).scrollTop();
if (thirdScreen <= 1000 && thirdScreen > 300) {
menuPoint(2);
}
var fouthScreen = $(".footerBox2").offset().top - $(document).scrollTop();
if (fouthScreen < 900)
{ menuPoint(3); }
});
function menuPoint(index)
{ $(".screenSwitch li").eq(index).addClass("screenSwitchCurrent").siblings().removeClass(); }
$(document).ready(function () {
$(".screenSwitch li").click(function () {
$(this).addClass("screenSwitchCurrent").siblings().removeClass();
});
bannerLength = $("#idContainer2 div").length;
bannerSetInterval = setInterval("runBanner()", 3000);
});
function bannerPrev() {
clearInterval(bannerSetInterval);
++bannerIndex;
if (bannerIndex >= bannerLength) {
bannerIndex = bannerLength - 1;
}
$(".wrapperLunbo li").eq(bannerIndex).addClass("wrapperLunboCurrent").siblings().removeClass();
$("#idContainer2 div").eq(bannerIndex).show().siblings().hide();
bannerSetInterval = setInterval("runBanner()", 3000);
}
function bannerNext() {
clearInterval(bannerSetInterval);
--bannerIndex;
$("#txtBrand").val(bannerIndex);
if (bannerIndex < 0) {
bannerIndex = 0;
}
$(".wrapperLunbo li").eq(bannerIndex).addClass("wrapperLunboCurrent").siblings().removeClass();
$("#idContainer2 div").eq(bannerIndex).show().siblings().hide();
bannerSetInterval = setInterval("runBanner()", 3000);
}
function bannerPoint(ele) {
clearInterval(bannerSetInterval);
bannerIndex = $(ele).index();
$(".wrapperLunbo li").eq(bannerIndex).addClass("wrapperLunboCurrent").siblings().removeClass();
$("#idContainer2 div").eq(bannerIndex).show().siblings().hide();
bannerSetInterval = setInterval("runBanner()", 3000);
}
</script>