使用jQuery实现图片轮播效果

使用jQuery实现图片轮播效果

jQuery是对JavaScript的简化,语法没有太大区别,比较JavaScript更加容易理解,代码量更少。

用jQuery实现图片轮播需要有以下步骤:

​ 1.对图片区域获取,想象中我们所用的图片是按照顺序排列起来,按照一定的时间切换图片的位置来实现轮播

​ 2.对左右两个按钮设置监听,当点击按钮时,要切换到前一张或者后一张

​ 3.对图片底部的小圆点设置监听事件,当点击小圆点时,切换到相应的图片位置,而且小圆点也要点亮

​ 4.对图片整体设置定时器,让图片自己轮播,再设置一个监听函数,让鼠标在图片区域悬停的时候停止定时器,挪开的之后继续轮播。

html+css区域代码:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>焦点轮播图</title>     <style type="text/css">         /*去除内边距,没有链接下划线*/         * {             margin: 0;             padding: 0;             text-decoration: none;         }         /*让<body有20px的内边距*/         body {             padding: 20px;         }         /*最外围的div*/         #container {             width: 600px;             height: 400px;             overflow: hidden;             position: relative; /*相对定位*/             margin: 0 auto;         }         /*包含所有图片的<div>*/         #list {             width: 4200px; /*7张图片的宽: 7*600 */             height: 400px;             position: absolute; /*绝对定位*/             z-index: 1;         }         /*所有的图片<img>*/         #list img {             float: left; /*浮在左侧*/         }         /*包含所有圆点按钮的<div>*/         #pointsDiv {             position: absolute;             height: 10px;             width: 100px;             z-index: 2;             bottom: 20px;             left: 250px;         }         /*所有的圆点<span>*/         #pointsDiv span {             cursor: pointer;             float: left;             border: 1px solid #fff;             width: 10px;             height: 10px;             border-radius: 50%;             background: #333;             margin-right: 5px;         }         /*第一个<span>*/         #pointsDiv .on {             background: orangered;         }         /*切换图标<a>*/         .arrow {             cursor: pointer;             display: none;             line-height: 39px;             text-align: center;             font-size: 36px;             font-weight: bold;             width: 40px;             height: 40px;             position: absolute;             z-index: 2;             top: 180px;             background-color: RGBA(0, 0, 0, 0.3);             color: #fff;         }         /*鼠标移到切换图标上时*/         .arrow:hover {             background-color: RGBA(0, 0, 0, 0.7);         }         /*鼠标移到整个div区域时*/         #container:hover .arrow {             display: block; /*显示*/         }         /*上一个切换图标的左外边距*/         #prev {             left: 20px;         }         /*下一个切换图标的右外边距*/         #next {             right: 20px;         }     </style> </head> <body> <div id="container">     <div id="list" style="left: -600px;">         <img src="img/5.webp" alt="5"/>         <img src="img/1.webp" alt="1"/>         <img src="img/2.webp" alt="2"/>         <img src="img/3.webp" alt="3"/>         <img src="img/4.webp" alt="4"/>         <img src="img/5.webp" alt="5"/>         <img src="img/1.webp" alt="1"/>     </div>     <div id="pointsDiv">         <span index="1" class="on"></span>         <span index="2"></span>         <span index="3"></span>         <span index="4"></span>         <span index="5"></span>     </div>     <a href="javascript:;" id="prev" class="arrow">&lt;</a>     <a href="javascript:;" id="next" class="arrow">&gt;</a> </div> </body> </html>

jsp相关代码:

//导入jQuery库 <script src="jquery-1.10.1.js"></script> <script>     //得到所有照片的div     var $div = $('#list');     var $span = $('#pointsDiv>span')     //获取照片当前的位置     var index = 1;     var isToggleImagEnd = true;     //点击按键往左移动     $('#prev').click(function () {         isToggleImg(0)     });     //点击按键往右移动     $('#next').click(function () {         isToggleImg(1)     });     function isToggleImg(n) {         if (isToggleImagEnd) {             isToggleImagEnd = false;             if (n == 0) {                 index--;             } else {                 index++;             }             $div.animate({                 left: index * (-600)             }, 500, function () {                 if (index == 0) {                     index = 5                 }                 if (index == 6) {                     index = 1;                 }                 //设置图片轮播时,从最后一张跳到第一张不会有间隙,跟其他图片一样跳转                 $div.css('left', index * (-600))                 //设置图片下面的圆点状态,更改其类属性                 $span.removeClass('on');                 $($span.get(index - 1)).addClass('on')                 isToggleImagEnd = true;             })         }     }     //设置延时函数,让图片自己定时轮播下一张     var interval = setInterval(function () {         isToggleImg(1);     }, 1000)     //鼠标图片上图片停止轮播,挪开继续轮播     $("#container").hover(function () {         clearInterval(interval)     }, function () {         interval = setInterval(function () {             isToggleImg(1);         }, 1000)     })     //对小圆点设置监听事件,点击小圆点,图片跳转     $span.click(function () {         index = $(this).index();         isToggleImg()     }) </script>

推荐阅读