js实现图片轮播效果
发布于 2017-06-28 12:05:54 | 159 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
这篇文章主要介绍了js实现图片轮播效果的相关资料,需要的朋友可以参考下
本文实例讲解了js实现图片轮播效果代码，分享给大家供大家参考，具体内容如下
运行代码如下
具体代码如下
插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制+禁止点击
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"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></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程序设计有所帮助。
推荐阅读
最新资讯