js实现图片轮播效果

本文实例讲解了射流研究…实现图片轮播效果代码，分享给大家供大家参考，具体内容如下

运行代码如下

具体代码如下

插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制禁止点击

半铸钢钢性铸铁(铸造半钢)样式：

风格。协作盒{位置：相对；高度： 91px边框-bottom: 1px实心# E0DED9飞越：隐藏；} .合作{位置：相对；左： 0；高度： 50pxpadd : 20px 0；} .合作li { float:左侧；宽度： 205像素；文本对齐：中心；} .合作阿利{ display:块}。合作李img {身高： 100%；} .合作-boxa { display : }块；绝对位置：top : 0；z指数： 9；宽度： 22px高度： 100%;背景： # f5f5f5字体系列： '宋体；font-size : 18pxcolor: # aaafont-weight:粗体；文本对齐：中心；线高： 91px} .合作-a框：悬停{背景： # e5e 5；} .合作盒子prev { left : 0；右边框： 1px实心# E0DED9 }。合作盒子。下一个{右： 0；边框-左侧： 1px实心# E0DED9 }。合作-box .prev.disabled .合作盒子。下一个。禁用{后台： # fbfbfbcolor: # ddd}。合作-box .prev.disabled:hover .合作盒子。下一个。禁用：悬停{背景： # fbfbfb}/styleHTML布局(a)标签最好加个标题属性):

div class=' cooperation-box ' a class=' prev ' href=' JavaScript :'/a a class=' next ' href=' JavaScript :'/a ul class=' cooperation ' lia href=' JAVAScript :'target=' _ blank ' img src=' http : images/img-demo 3。jpg ' alt=' '/a/Li lia href=' JavaScript :target=' _ blank ' img src=' http : images/img-demo 3。jpg ' alt=' '/a/Li lia href=' JavaScript :target=' _ blank ' img src=' http : images/img-demo 3。jpg ' alt=' '/a/Li lia href=' JavaScript :target=' _ blank ' img src=' http : images/img-demo 3。jpg ' alt=' '/a/Li lia href=' JavaScript :'target=' _ blank ' img src=' http : images/img-demo 3。jpg ' alt=' '/a/Li lia href=' JavaScript :target=' _ blank ' img src=' http : images/img-demo 3。jpg ' alt=' '/a/Li lia href=' JavaScript :target=' _ blank ' img src=' http : images/img-demo 3。jpg ' alt=' '/a/Li lia href=' JavaScript :target=' _ blank ' img src=' http : images/img-demo 3。jpg ' alt=' '/a/Li/ul/Divjs脚本插件：

脚本$。扩展({ /*图片轮播效果效果： 1、自动滚动2、鼠标悬停3、左右控制禁止点击调用：$.滚动({ box : }父容器，scrollbox: 'ul '，time : 1500 })；*/scroll:函数（选项){ //默认配置定义变量默认值={ box: ' .合作-框',//父容器scrollbox: ' .合作，//ul容器时间： 1500 /切换时间};//扩展配置var conf=$ .扩展({}，默认值，选项);//获取里的个数var liSize=$(conf.box).查找('里').size()；//获取里的宽度var liWidth=$(conf.box).查找(' li:first ').宽度();//定义保险商实验所的宽度$(conf.scrollbox).宽度(LiWidth * LiSize)；//右箭头初始化（不可点)$(conf.box).查找('。下一个')。添加CLaSS(' disabled ')；//定义一个全局变量指数索引变量定义变量索引=0;//切换函数函数switch func(){ index；if(index liSize-5) { //必须有5个显示在上面索引=Lisize-5；//把滚动过的添加到后面，初始左边的值为0索引值为0 var scroll edli=$(conf。方框).find(' Li : lt(' index '))；$(conf.scrollbox).追加(scrolledLi)；$(conf.scrollbox).css('left '，0)；索引=0;} $(conf.scrollbox).停止（真，真)。animate({ ' left ' :-LiwIdth * index }，500，function() { $(conf.box).查找('。下一个')。removeClass(“”已禁用');} );} //自动播放var autoPlay=set interval(function(){ switch func()；}，conf。时间)；//鼠标浮上暂停$(conf.box).鼠标悬停(function(){ clearInterval(autoPlay))；});//鼠标离开继续$(conf.box).鼠标移出(function(){ autoPlay=setInterval(function(){ switch func()))；}，conf。时间)；});//点击左箭头$(conf.box).查找('。prev ').单击(function(){ index；if(index=LiSize-5){ index=LiSize-5；$(这个)。添加CLaSS(' disabled ')；} $(conf.scrollbox).停止（真，真)。animate({ ' left ' :-LiwIdth * index }，500，function() { $(conf.box).查找('。下一个')。removeClass(“”已禁用');} );});//点击右箭头$(conf.box).查找('。下一个')。单击(function(){ index-；if(index=0){ index=0；$(这个)。添加CLaSS(' disabled ')；} $(conf.scrollbox).停止（真，真)。animate({ ' left ' :-LiwIdth * index }，500，function() { $(conf.box).查找('。prev ').removeClass(“”已禁用');} );});} });/script页面调用：

script $(function() { $).滚动({ time : 1500 })；});/script希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。