您的位置：首页 > Web前端 > HTML

【福利】一个简单实用的JQ轮播效果封装函数

2017-12-25 10:34 483 查看

【福利】一个简单实用的JQ轮播效果封装函数

这是一个在项目中总结出来的[简单且实用][6]的JQ渐变轮播效果的封装函数，欢迎各位看官指点：

纯JQ（我使用的是jquery-2.1.4.js）

根据实际情况可进行适当调整

使用了一些简单的animate()

代码比较简单易懂

采用多参数封装方法

[代码块][6]

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>easy code</title>
<link rel="stylesheet" type="text/css" href="css/scroll.css" />
<script src="js/jquery-2.1.4.js"></script>
<script src="js/scroll.js"></script>
</head>
<body>
<div class="scroll_pic">
<div class="prev" id="prev">
<span class="icon fa fa-angle-left"></span>
</div>
<div class="next" id="next">
<span class="icon fa fa-angle-right"></span>
</div>
<ul class="pic pic_0">
<li class="active">
<img src="img/pic_1.jpg" alt="图片一" title="吧啦吧啦吧吧啦吧啦吧吧啦1" />
</li>
<li>
<img src="img/pic_2.jpg" alt="图片二" title="吧啦吧啦吧吧啦吧啦吧吧啦2" />
</li>
<li>
<img src="img/pic_3.jpg" alt="图片三" title="吧啦吧啦吧吧啦吧啦吧吧啦3" />
</li>
<li>
<img src="img/pic_4.jpg" alt="图片四" title="吧啦吧啦吧吧啦吧啦吧吧啦4" />
</li>
</ul>
<div class="txt txt_0"></div>
<ul class="dot dot_0">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
//四个参数：图片组、文字组、节点组、切换时间、判断是否有翻页按钮（0/1）
autoPlay(".pic_0",".txt_0",".dot_0",4000,1);
</script>
</html>

js

function autoPlay(obj1,obj2,obj3,t,status){
var curIndex = 0, //当前index
state,
$obj1 = $(obj1).find("li"),
imgLen = $obj1.length; //图片总数
$(obj2).html($obj1.find("img").eq(0).attr("title"));

//初始化图片透明度
$(obj1).find("li:gt(0)").css("opacity",0);

// 定时器自动变换4秒每次
var autoChange = setInterval(function() {
state=1;
changeOp(curIndex,state);
if(curIndex < imgLen - 1) {
curIndex++;
} else {
curIndex = 0;
}
//调用变换处理函数

changeTo(curIndex);
}, t);
if(status==1){
//左箭头滑入滑出事件处理
$("#prev").hover(function() {
//滑入清除定时器
clearInterval(autoChange);
}, function() {
//滑出则重置定时器
autoChangeAgain();
});
//左箭头点击处理
$("#prev").click(function() {
state=0;
//根据curIndex进行上一个图片处理
curIndex=curIndex<0?imgLen-1:curIndex;
changeOp(curIndex,state);

curIndex--;
curIndex=curIndex<0?imgLen-1:curIndex;
changeTo(curIndex);
});

//右箭头滑入滑出事件处理
$("#next").hover(function() {
//滑入清除定时器
clearInterval(autoChange);
}, function() {
//滑出则重置定时器
autoChangeAgain();
});
//右箭头点击处理
$("#next").click(function() {
state=1;
changeOp(curIndex,state);
curIndex++;
curIndex=curIndex<imgLen?curIndex:0;
changeTo(curIndex);
});
}
//清除定时器时候的重置定时器--封装
function autoChangeAgain(){
autoChange = setInterval(function(){
state=1;
changeOp(curIndex,state);
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//调用变换处理函数
changeTo(curIndex);
},t);
}
function changeOp(num,state){
if(state==0){
$obj1.eq(num).animate({opacity:0},1000).prev().animate({opacity:1},1000);
if(num==0){
$obj1.eq(imgLen-1).animate({opacity:1},1000);
}
}else if(state==1){
$obj1.eq(num).animate({opacity:0},1000).next().animate({opacity:1},1000);
if(num==$obj1.length-1){
$obj1.eq(0).animate({opacity:1},1000);
}
}
}
function changeTo(num){
$(obj2).html($obj1.find("img").eq(num).attr("title"));
$obj1.removeClass("active").eq(num).addClass("active");
$(obj3).find("li").removeClass("active").eq(num).addClass("active");
}
//对右下角按钮index进行事件绑定处理等
$(obj3).find("li").each(function(item){
$(this).hover(function(){
clearInterval(autoChange);
changeTo(item);
curIndex = item;
$obj1.eq(curIndex).animate({opacity:1},1000).siblings().animate({opacity:0},1000);
},function(){
autoChangeAgain();
});
});
}

CSS

/*图片新闻*/
.scroll_pic {
width: 1040px;
height: 394px;
margin: 0 auto;
position: relative;
}
.scroll_pic .prev, .content .scroll_pic .next {
padding: 40px 20px;
font-size: 36px;
color: rgba(255,255,255,0.6);
position: absolute;
top: 30%;
z-index: 999;
}
.scroll_pic .prev {
left: 0;
}
.scroll_pic .next {
right: 0;
}
.scroll_pic .prev:hover, .content .scroll_pic .next:hover {
color: rgba(255,255,255,1);
}
.scroll_pic .pic li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 394px;
}
.scroll_pic .pic .active {
display: block;
}
.scroll_pic .pic li img {
width: 100%;
height: 394px;
}
.content .scroll_pic .dot {
position: absolute;
bottom: 15px;
right: 30px;
}
.scroll_pic .dot li {
display: inline-block;
margin: 0 5px;
padding: 4px 8px;
border-radius: 5px;
background-color: #FFFFFF;
}
.scroll_pic .dot .active, .content .scroll_pic .dot li:focus,.content .scroll_pic .dot li:hover {
background-color: orangered;
}
.scroll_pic .txt {
width: 100%;
height: 48px;
line-height: 48px;
padding-left: 24px;
background: rgba(0,0,0,0.5);
color: #FFFFFF;
font-family: webdings sans-serif;
font-size: 14px;
letter-spacing: 1px;
position: absolute;
bottom: 0;
}

上述代码中的图片请自行添加[^footnote].

注意：兼容大部分浏览器，IE过低版本不兼容，另外总结什么的就不写了，自己尝试一下吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 函数 html 轮播插件 jq

相关文章推荐

新的分享

章节导航