【福利】一个简单实用的JQ轮播效果封装函数
【福利】一个简单实用的JQ轮播效果封装函数
这是一个在项目中总结出来的[简单且实用][6]的JQ渐变轮播效果的封装函数，欢迎各位看官指点：
纯JQ（我使用的是jquery-2.1.4.js）
根据实际情况可进行适当调整
使用了一些简单的animate()
代码比较简单易懂
采用多参数封装方法
[代码块][6]
HTML
<html>
<head>
<meta charset="utf-8">
<title>easy codetitle>
<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=curIndex0;
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过低版本不兼容，另外总结什么的就不写了，自己尝试一下吧。