本文分享了jQuery实现左右图片轮播的代码，供大家参考。具体实施内容如下。

运行渲染：

集中精神！

实施原则：

通过判断索引值的变化来判断图片向左还是向右移动。通过控制图片的左值，我们可以达到轮播的效果。

特定代码：

！DOCTYPE html html head meta charset=' utf-8 ' title/title/head script src=' http : js/jquery。量滴js /脚本样式banner { margin :0 auto order : 4px黑色虚线；宽度宽度：400像素高度：200 px相对位置：飞越：隐藏；} .banner a { z-index : 100显示器：块；宽度：100%;高度： 100%;绝对位置：左侧：100%;top:0}。班纳。第一个{ left:0}。横幅a img { width :100%；高度： 100%;} .选择{ z-index : 1000绝对位置：左侧：150pxtop:180px宽度宽度：100像素宽度：像素。选择span { margin-right : 15px；向左浮动：显示：块；背景：蓝色；宽度：10 px高度： 10px边框-半径： 10px} .选择span :悬停{背景：红色；} .选择。红色{ background:红色；} .班纳预先，预先.下一个{光标：指针文本对齐：居中；边界半径：20像素；显示：块；背景# ccccccopacity:0.4文本装饰：无；z指数： 200；显示：块；宽度：40 px高度： 40pxfont-size : 40px颜色：红色绝对位置：top:80px}。班纳pre{ left:0px } .班纳。下一个{ right : 0px }/style body div class=' banner '！-这里为上一页下一页点击按钮-span class=' pre '-/span span class=' next '/span！-此处为轮播主体，颜色块代替。图片自加-a href=' # # # ' class=' first ' style='背景： pink'/a a href=' # # # ' style='背景：蓝色；'img src=' http : images/banner 1。jpg '/a a href=' # # # ' style='背景：绿色黄色；'img src=' http : images/banner 2。jpg '/a a href=' # # # ' style='背景： deepsky blue'img src=' http : images/banner 3。jpg '/a！-此处为轮播部分下方小点选择-div class=' choose ' span class=' red '/span span/span span/span/span/span/div/div脚本/*定义两个变量，保存当前页码和上一页页码*/var $ index=0；var $ ex dex=0；/*小点的鼠标移入事件，触发图片左移还是右移*/$('.选择"跨度")。mouseover(function(){ //获取当前移入的指数值$index=$(this).index()；//首先让点的颜色变化，表示选中$('.选择"跨度")。情商(指数).addClass(')红色')。兄弟姐妹()。removeClass(“”红色');//判断如果指数变小，证明图片要往左移动。变大则为右移if($ index $ exdex){ next()；} else if($ index $ exdex){ pre()；} //移动完毕将当前指数值替换了前页索引返回$ ex dex=$ index })；//下一页的点击事件。在右移基础上加了最大指数判断$('.下一个')。单击(function(){ $ index；if($index3){ $index=0 } $(' .选择"跨度")。情商(指数).addClass(')红色')。兄弟姐妹()。removeClass(“”红色');next()；return $ exdex=$ index })；//上一页的点击事件$('.前' .click(function(){ $ index-；if($ index 0){ $ index=3 }；$('.选择"跨度")。情商(指数).addClass(')红色')。兄弟姐妹()。removeClass(“”红色');pre()；return $ exdex=$ index })；//加个定时器，正常轮播var atime=SetInterval(function(){ $(')).下一个')。单击();},1000);//这里为右移和左移的事件函数。

//右移基本原理就是先让exdex定位的左边的左移百分百，而选中的当前页从屏幕右边移入，左侧变为0函数next(){ $(' .横幅a ').情商(指数).停止（真，真)。css(“”左',' 100% ')。动画({ ' left ' : ' 0 ' })；$('.横幅a ').情商(exdex ).停止（真，真)。css(“”左',' 0 ')。动画({ ' left ' : '-100% ' })；}函数pre(){ $(' .横幅a ').情商(指数).停止（真，真)。css(“”左','-100% ')。动画({ ' left ' : ' 0 ' })；$('.横幅a ').情商(exdex ).停止（真，真)。css(“”左',' 0 ')。动画({ ' left ' : ' 100% ' })；}/脚本/正文/html精彩专题分享：jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播

这就是本文的全部内容，将帮助您实现简单大方的图片轮播效果。