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值为0var 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程序设计有所帮助。