本文实例讲解了js实现图片轮播效果代码，分享给大家供大家参考，具体内容如下
运行代码如下
具体代码如下
插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制+禁止点击
CSS样式：
.cooperation-box {
position: relative;
height: 91px;
border-bottom: 1px solid #E0DED9;
overflow: hidden;
}
.cooperation {
position: relative;
left: 0;
height: 50px;
padding: 20px 0;
}
.cooperation li {
float: left;
width: 205px;
text-align: center;
}
.cooperation li a {
display: block;
}
.cooperation li img {
height: 100%;
}
.cooperation-box>a {
display: block;
position: absolute;
top: 0;
z-index: 9;
width: 22px;
height: 100%;
background: #f5f5f5;
font-family: '宋体';
font-size: 18px;
color: #aaa;
font-weight: bold;
text-align: center;
line-height: 91px;
}
.cooperation-box>a:hover {
background: #e5e5e5;
}
.cooperation-box .prev {
left: 0;
border-right: 1px solid #E0DED9;
}
.cooperation-box .next {
right: 0;
border-left: 1px solid #E0DED9;
}
.cooperation-box .prev.disabled,.cooperation-box .next.disabled {
background: #fbfbfb;
color: #ddd;
}
.cooperation-box .prev.disabled:hover,.cooperation-box .next.disabled:hover {
background: #fbfbfb;
}
HTML布局( a标签最好加个title属性 )：
$.extend({
/*
图片轮播效果
效果：
1、自动滚动
2、鼠标悬停
3、左右控制+禁止点击
调用：$.scroll({box: '父容器',scrollbox: 'ul',time: 1500});
*/
scroll: function(options) {
// 默认配置
var defaults = {
box: '.cooperation-box',// 父容器
scrollbox: '.cooperation',// ul容器
time: 1500 // 切换时间
};
// 扩展配置
var conf = $.extend({},defaults,options);
// 获取li的个数
var liSize = $(conf.box).find('li').size();
// 获取li的宽度
var liWidth = $(conf.box).find('li:first').width();
// 定义ul的宽度
$(conf.scrollbox).width(liWidth*liSize);
// 右箭头初始化(不可点)
$(conf.box).find('.next').addClass('disabled');
// 定义一个全局变量index索引变量
var index = 0;
// 切换函数
function switchFunc() {
index++;
if(index > liSize-5) { // 必须有5个显示在上面
index=liSize-5;
// 把滚动过的添加到后面，初始left值为0 index值为0
var scrolledLi = $(conf.box).find('li:lt('+index+')');
$(conf.scrollbox).append(scrolledLi);
$(conf.scrollbox).css('left',0);
index = 0;
}
$(conf.scrollbox).stop(true,true).animate(
{'left': -liWidth*index},500,function() {
$(conf.box).find('.next').removeClass('disabled');
}
);
}
// 自动播放
var autoPlay = setInterval(function() {switchFunc();},conf.time);
// 鼠标浮上暂停
$(conf.box).mouseover(function() {
clearInterval(autoPlay);
});
// 鼠标离开继续
$(conf.box).mouseout(function() {
autoPlay = setInterval(function() {switchFunc();},conf.time);
});
// 点击左箭头
$(conf.box).find('.prev').click(function() {
index++;
if(index >= liSize-5) {
index=liSize-5;
$(this).addClass('disabled');
}
$(conf.scrollbox).stop(true,function() {
$(conf.box).find('.next').removeClass('disabled');
}
);
});
// 点击右箭头
$(conf.box).find('.next').click(function() {
index--;
if(index <= 0) {
index = 0;
$(this).addClass('disabled');
}
$(conf.scrollbox).stop(true,function() {
$(conf.box).find('.prev').removeClass('disabled');
}
);
});
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
