本文实例讲解了js实现图片轮播效果代码，分享给大家供大家参考，具体内容如下
运行代码如下
具体代码如下
插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制+禁止点击
立即学习“Java免费学习笔记（深入）”；
CSS样式：
<style>
.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;
}
</style>
HTML布局( a标签最好加个title属性 )：
<div class="cooperation-box">
<a class="prev" href="javascript:;"><</a>
<a class="next" href="javascript:;">></a>
<ul class="cooperation">
<li><a href="javascript:;" target="_blank">@@##@@</a></li>
<li><a href="javascript:;" target="_blank">@@##@@</a></li>
<li><a href="javascript:;" target="_blank">@@##@@</a></li>
<li><a href="javascript:;" target="_blank">@@##@@</a></li>
<li><a href="javascript:;" target="_blank">@@##@@</a></li>
<li><a href="javascript:;" target="_blank">@@##@@</a></li>
<li><a href="javascript:;" target="_blank">@@##@@</a></li>
<li><a href="javascript:;" target="_blank">@@##@@</a></li>
</ul>
</div>
JS脚本插件：
<script>
$.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, true).animate(
{'left': -liWidth*index},
500,
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, true).animate(
{'left': -liWidth*index},
500,
function() {
$(conf.box).find('.prev').removeClass('disabled');
}
);
});
}
});
</script>
页面调用：
<script>
$(function() {
$.scroll({time: 1500});
});
</script>
希望本文所述对大家学习javascript程序设计有所帮助。
