jquery实现横向图片轮播特效代码分享

一个纯日本季刊日本季刊形式的横向轮播焦点图，可点击小圆点或者左右按钮进行切换，属于定宽类型。改成自适应宽度的也不难，将钢性铸铁里面的bannerCon宽度改为百分比，再在射流研究…里面将保险商实验所和里的宽度跟随父级容器的宽度变化即可，需要用到$(窗口)。调整大小。兼容到IE6以上浏览器，有轮播速度和切换间隔两个参数可以改。效果图如下：

超文本标记语言代码如下：

！doctype html html lang=' zh-CN ' head meta charset=' utf-8 '标题横幅图/title link href=' CSS/style。CSS ' rel='样式表'/脚本src=' http : js/jquery-1。9 .1 .量滴js /脚本src=' http : js/common。js /脚本/head body div class=' wrap ' div class=' banner con ' ul class=' IMglist clear fix ' lia href=' # ' IMG src=' http 3360 images/样式如下：

@ charset“utf-8”；/* 简单reset */body，p，ul，ol，Li { margin : 0；padd : 0；}ul，ol { list-style : none；} img { border:none}a、按钮{ outline : none } . clear fix : after。在{可视性：隐藏后；显示器：块；font-size : 0；内容： " "；clear:两者；高度： 0;} /* 具体样式*/.横幅{位置：相对；高度： 400像素；飞越：隐藏；}.班纳bannerCon { position:绝对值；top : 0；左侧： 50%;宽度： 800像素；高度： 400像素；边距-左侧：-400像素；飞越：隐藏；}.班纳肯imgList { position:绝对值；top : 0；左： 0；宽度： 99999 px高度： 400像素；}.班纳肯imgList li {左侧浮动：宽度： 800像素；高度： 400像素；}.班纳肯imgList .阿利{位置：相对；显示器：块；高度： 100%;}.班纳肯imgList li img { width: 800px高度： 400像素；}.班纳肯NEX前{显示器：无；绝对位置：前：名50%；宽度： 40px高度： 60px边距-top :-40px；字体：加粗40px/60px Simsun；color: # ccc文本对齐：中心；border : none background : rgba(0，0，0，30);过滤器： progid : maximagettransform .微软。渐变(startColorStr=# 4c 000000，endColorStr=# 4c 000000)；光标：指针；z-index : 3；}.班纳肯NEX之前。show { display : inline-block；}.班纳肯沪指{左： 13%；}.班纳肯。下一个{右： 13%；}.班纳肯btnList { position:绝对值；左： 0；bottom: 20px宽度： 100%;高度： 12px文本对齐：居中；z-index : 2；_overflow:隐藏；}.班纳肯btnList li { display: inline}。班纳肯列表Li span {显示： in-block；宽度： 12px高度： 12pxmargin : 0 5pxborder-半径： 6px背景色： # 14829 e；光标：指针；}.班纳肯列举李。cur span {底色： # f30}Js代码如下：

//加载在文本读取之后的射流研究…语句开始=============================================================================函数滚动(obj，速度，间隔){ //父级容器，轮播速度，切换间隔$('.'obj ).每个（函数(){ var $box=$(this)，$imgUl=$box.children ' .imgList ')，$imgLi=$imgUl.children('li ')，$btnUl=$box.children(' .btnList ')，$btnLi=$btnUl.children('li ')，$btnPreNex=$box.children(' .pre-nex ')，$btnPre=$box.children ' .prev ')，$ btnNex=$ box.children ' .next ')，n=$imgLi.length，width=$imgLi.width()，left=parseFloat($ imgul)。CSS('左')，k=0，Player$imgUl.css('width '，n * width)；函数roll(){ //轮播事件$imgUl.stop().动画({left:-width})、速度、函数(){ k=1；$imgUl.css('left '，0)；$imgUl.children('li:first ').appendo($(this))。$ btnli。移除类(' cur ')；if(k=n){ k=0；} $btnUl.children('li ').方程式(k)1 .添加CLaSS(' cur ')；});} $btnLi.click(function(){ //小圆点点击事件var索引=$ btnli。索引(这个)；$(这个)。addClass('cur ').兄弟姐妹('里').移除CLaSS(' cur ')；if(index=k){ var dif=index-k；左=-dif *宽度；$imgUl.stop().animate({left:left}，speed，function(){ $imgUl.css('left '，0)；$ IMgul。儿童(李： lt(' dif ')).appendo(IMgul美元)；});} else { var j=n-(k-index)；$imgUl.css('left '，(index-k)* width)；$imgUl.children('li:lt(' j ')').appendo(IMgul美元)；$imgUl.stop().动画({left:0}，速度)；} k=索引；});$btnPreNex.click(function(){ //左右按钮点击事件var索引=$ btnli。索引(这个)；if($(this).有类(' next '){ if(！$ IMgul。is(' :动画'){ k=1；$ IMgul。animate({ left :-width })，speed，function(){ $imgUl.css('left '，0)；$imgUl.children('li:first ').appendo($(this))。if(k=n){ k=0；} $btnUl.children('li ').removeClass('cur ').方程式(k)1 .添加CLaSS(' cur ')；});} } else { if(！$ IMgul。is(' :动画'){ k=-1；$imgUl.css('left '，-width)；$imgUl.children('li:last ').前置到($ IMgul)；$imgUl.stop().动画({left:0}，速度)；if(k ^ 0){ k=n-1；} $btnUl.children('li ').removeClass('cur ').方程式(k)1 .添加CLaSS(' cur ')；} } });$box.hover(//鼠标移入、移出事件function(){ clearInterval(Player)；$ btnprenex。add CLaSS(' show ')；}，function(){ Player=setInterval(function(){ scroll()}，interval)；$ btnprenex。移除类(' show ')；} );player=setInterval(function(){ scroll()}，interval)；});} $(function () { //读取轮播事件卷轴(' bannerCon '，600，4000)；});注意加载一下日本季刊日本季刊库，我用的是1.9.1的，其实1.7 的都没问题的。

以上就是为大家分享的jquery图片轮播效果，希望对大家的学习有所帮助。