大佬教程收集整理的这篇文章主要介绍了Jquery制作插件---渐隐轮播，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
//需求:打开网页时，每秒钟自动切换下一张图片内容。也可以用鼠标点导航按钮进行图片切换@H_618_10@@H_618_10@
<!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_644_46@margin@H_674_47@: 0;
padding@H_674_47@: 0;
}
ul{
list-style@H_674_47@: none;
}
.container{
width@H_674_47@: 1000px;
height@H_674_47@: 400px;
position@H_674_47@: relative;
}
.wrapper{
height@H_674_47@: 400px;
position@H_674_47@: relative;
}
.wrapper li{
position@H_674_47@: absolute;
width@H_674_47@: 100%;
height@H_674_47@: 100%;
display@H_674_47@: none;
}
.wrapper .cur{
display@H_674_47@: block;
}
.wrapper a{
display@H_674_47@: block;
width@H_674_47@: 100%;
height@H_674_47@: 100%;
text-decoration@H_674_47@: none;
}
img{
width@H_674_47@: 100%;
height@H_674_47@: 100%;
display@H_674_47@: block;
}
.pagination{
position@H_674_47@: absolute;
width@H_674_47@: 200px;
height@H_674_47@: 20px;
right@H_674_47@: 100px;
bottom@H_674_47@: 30px;
}
.pagination li{
float@H_674_47@: left@H_674_47@;
width@H_674_47@: 10px;
height@H_674_47@: 10px;
border-radius@H_674_47@: 50%;
@H_644_46@margin@H_674_47@:0 5px;
BACkground-color@H_674_47@: #000;
border@H_674_47@:2px solid #777;
}
.pagination .act{
BACkground-color@H_674_47@: #fff;
}
.prev,.next{
position@H_674_47@: absolute;
width@H_674_47@: 41px;
height@H_674_47@: 67px;
BACkground-image@H_674_47@: url(img/icon-slides.png);
BACkground-repeat@H_674_47@: no-repeat;
top@H_674_47@: 166px;
}
.prev{
BACkground-position@H_674_47@: -83px 0;
left@H_674_47@: 0;
}
.prev:hover{
BACkground-position@H_674_47@: 0 0;
}
.next{
right@H_674_47@: 0;
BACkground-position@H_674_47@: -124px 0;
}
.next:hover{
BACkground-position@H_674_47@: -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_644_46@margin-left@H_674_47@: 30%;">网页轮播图效果1111111</div>
<script type="text/javascript">
// $(".wrapper li").eq(1).fadeIn(2000).siblings().fadeOut(2000);
// 当前li的索引
var @H_674_47@index = 0;
function @H_674_47@changeImg(num@H_674_47@){
$(".wrapper li").eq(num).fadeIn().siblings().fadeOut();
$(".pagination li").eq(num).addClass("act").siblings().removeClass("act");
}
// changeImg(3);
function @H_674_47@autoPlay(){
if (index==6) {
changeImg(indeX);
}
var @H_674_47@timer = seTinterval(autoPlay,2000);
$(".container").mouSEOver(function@H_674_47@(){
clearInterval(timer);
}).mouSEOut(function@H_674_47@(){
timer = seTinterval(autoPlay,2000);
});
$(".prev").click(function@H_674_47@(){
changeImg(indeX);
});
$(".next").click(function@H_674_47@(){
autoPlay();
});
$(".pagination li").click(function@H_674_47@(){
var @H_674_47@i = $(this@H_674_47@).index();
changeImg(indeX);
});
</script>
</body>
</html>
以上是大佬教程为你收集整理的Jquery制作插件---渐隐轮播全部内容，希望文章能够帮你解决Jquery制作插件---渐隐轮播所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。