大佬教程收集整理的这篇文章主要介绍了Jquery制作插件---渐隐轮播，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_450_7@//需求:打开网页时，每秒钟自动切换下一张图片内容。也可以用鼠标点导航按钮进行图片切换
//代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<style type="text/css">
*{
@H_292_46@margin: 0;
}
ul{
}
.container{
}
.wrapper{
}
.wrapper li{
}
.wrapper .cur{
}
.wrapper a{
}
img{
}
.pagination{
}
.pagination li{
@H_292_46@margin:0 5px;
BACkground-color: #000;
}
.pagination .act{
BACkground-color: #fff;
}
.prev,.next{
BACkground-image: url(img/icon-slides.png);
BACkground-repeat: no-repeat;
}
.prev{
BACkground-position: -83px 0;
}
.prev:hover{
BACkground-position: 0 0;
}
.next{
BACkground-position: -124px 0;
}
.next:hover{
BACkground-position: -42px 0;
}
</style>
</head>
<body>
<div class="container">
<ul class="wrapper">
<li class="cur"><a href="#"><img src="img/ban01.jpg" ></a></li>
<li><a href="#"><img src="img/ban02.jpg" ></a></li>
<li><a href="#"><img src="img/ban03.jpg" ></a></li>
<li><a href="#"><img src="img/ban04.jpg" ></a></li>
<li><a href="#"><img src="img/ban05.jpg" ></a></li>
<li><a href="#"><img src="img/ban06.jpg" ></a></li>
<li><a href="#"><img src="img/ban07.jpg" ></a></li>
</ul>
<ul class="pagination">
</ul>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
<div style="@H_292_46@margin-left: 30%;">网页轮播图效果1111111</div>
<script type="text/javascript">
// $(".wrapper li").eq(1).fadeIn(2000).siblings().fadeOut(2000);
// 当前li的索引
var index = 0;
function changeImg(num){
$(".wrapper li").eq(num).fadeIn().siblings().fadeOut();
$(".pagination li").eq(num).addClass("act").siblings().removeClass("act");
}
// changeImg(3);
function autoPlay(){
if (index==6) {
changeImg(indeX);
}
var timer = seTinterval(autoPlay,2000);
$(".container").mouSEOver(function(){
clearInterval(timer);
timer = seTinterval(autoPlay,2000);
});
$(".prev").click(function(){
changeImg(indeX);
});
$(".next").click(function(){
autoPlay();
});
$(".pagination li").click(function(){
var i = $(this).index();
changeImg(indeX);
});
</script>
</body>
</html>
以上是大佬教程为你收集整理的Jquery制作插件---渐隐轮播全部内容，希望文章能够帮你解决Jquery制作插件---渐隐轮播所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。