前端之家收集整理的这篇文章主要介绍了
js实现图片轮播效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲解了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: '父容器',scroll
Box: 'ul',time: 1500});
*/
scroll: function(options) {
// 默认配置
var defaults = {
Box: '.cooperation-
Box',// 父容器
scroll
Box: '.cooperation',// ul容器
time: 1500 // 切换时间
};
// 扩展配置
var conf = $.extend({},defaults,options);
// <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>li的个数
var liSize = $(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('li').size();
// <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>li的宽度
var liWidth = $(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('li:first').width();
// 定义ul的宽度
$(conf.scroll<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).width(liWidth*liSize);
// 右箭头初始化(不可点)
$(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('.next').addClass('disabled');
// 定义一个<a href="https://www.jb51.cc/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>index索引变量
var index = 0;
// 切换<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
function switchFunc() {
index++;
if(index > liSize-5) { // 必须有5个<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>在上面
index=liSize-5;
// 把滚动过的<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>到后面，初始left值为0 index值为0
var scrolledLi = $(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('li:lt('+index+')');
$(conf.scroll<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).append(scrolledLi);
$(conf.scroll<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).css('left',0);
index = 0;
}
$(conf.scroll<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).stop(true,true).animate(
{'left': -liWidth*index},500,function() {
$(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('.next').removeClass('disabled');
}
);
}
// <a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>播放
var autoPlay = setInterval(function() {switchFunc();},conf.time);
// 鼠标浮上暂停
$(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver(function() {
clearInterval(autoPlay);
});
// 鼠标离开继续
$(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut(function() {
autoPlay = setInterval(function() {switchFunc();},conf.time);
});
// 点击左箭头
$(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('.prev').click(function() {
index++;
if(index >= liSize-5) {
index=liSize-5;
$(this).addClass('disabled');
}
$(conf.scroll<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).stop(true,function() {
$(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('.next').removeClass('disabled');
}
);
});
// 点击右箭头
$(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('.next').click(function() {
index--;
if(index <= 0) {
index = 0;
$(this).addClass('disabled');
}
$(conf.scroll<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).stop(true,function() {
$(conf.<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>).find('.prev').removeClass('disabled');
}
);
});
}
});
