<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- START 轮播图 -->
<div class="slideBox">
<ul>
<li>
<a href="__URL__/contact">
<img src="__PUBLIC__/Images/index/indexshow/fiest.jpg" class="animated fadeInLeft" alt="第一张轮播图上动态文字" />
</a>
</li>
<li>
<img src="__PUBLIC__/Images/index/indexshow/second.jpg" class="animated fadeInRight" alt="第二张轮播图上动态文字" />
</li>
<li>
<img src="__PUBLIC__/Images/index/indexshow/third.jpg" class="animated fadeInUp" alt="第三张轮播图上动态文字" />
</li>
</ul>
<div class="spanBox">
<span class="active">1</span>
<span>2</span>
<span>3</span>
</div>
<div class="prev"><img src="__PUBLIC__/Images/index/indexshow/lefticon.png" alt=""/></div>
<div class="next"><img src="__PUBLIC__/Images/index/indexshow/righticon.png" alt=""/></div>
</div>
<!-- End 轮播图 -->
<script type="text/javascript" src="__PUBLIC__/Js/jquery-2.11.1.min.js"></script>
<script>/*页脚微信悬停显示图标效果*/
function hideImg(){
document.getElementById("wxImg").style.display = 'none';
}
function showImg(){
document.getElementById("wxImg").style.display = 'block';
}
</script>
<script type="text/javascript">
var slideBox = $(".slideBox");
var ul = slideBox.find("ul");
var oneWidth = slideBox.find("ul li").eq(0).width();
var number = slideBox.find(".spanBox span");
var timer = null;
var sw = 0;
number.on("click",function (){
$(this).addClass("active").siblings("span").removeClass("active");
sw = $(this).index();
ul.animate({
"right":oneWidth*sw,
});
})
$(".next").stop(true,true).click(function () {
sw++;
if(sw == number.length){ sw = 0 };
number.eq(sw).trigger("click");
});
$(".prev").stop(true,true).click(function () {
sw--;
if(sw == -1){ sw = 3 };
number.eq(sw).trigger("click");
});
timer = setInterval(function () {
sw++;
if(sw == number.length){ sw = 0 };
number.eq(sw).trigger("click");
},2000);
slideBox.hover(function() {
$(".next,.prev").animate({
"opacity":1,
},2000);
clearInterval(timer);
},function(){
$("next,.prev").animate({
"opacity":0.5,
},500);
timer = setInterval(function () {
sw++;
if(sw == number.length){ sw = 0 };
number.eq(sw).trigger("click");
},2000);
})
})
</script>
</body>
</html>
利用jQuery做的轮播图
猜你喜欢
转载自blog.csdn.net/qq_34633111/article/details/82912293
今日推荐
周排行