| 【jQuery】前端项目实践案例4 | 您所在的位置：网站首页 › jquery图片轮播 › 【jQuery】前端项目实践案例4 |
【jQuery】前端项目实践案例4
|
轮播图实现效果：
通过设置图像的 src 属性，显示不同的图片，借助循环动画实现轮播图效果。 轮播图实现思路：（1）div+css布局，制作轮播图列表以及配套的数字列表。 （2）轮播图默认轮播，即在ready事件里，直接执行函数。 （3）轮播图事件的执行：循环执行使用setInterval方法。 （4）鼠标移上去，轮播图停止，同时轮播数字样式发生变化，鼠标离开，轮播图继续。 （5）使用 clearInterval() 方法，可取消由 setInterval() 函数设定的定时执行操作。 jQuery制作轮播的具体步骤： 第一步：制作网页内容（轮播图列表和轮播数字列表）
1
2
3
初始效果：
实现效果：
关键代码： *{ margin: 0; padding: 0; } div { width: 600px; /* 图片的宽度是600px,高度是300px */ margin: 20px auto; position: relative; } ul li { float: left; list-style: none; width: 20px; height: 20px; border: 1px solid red; margin-right: 10px; text-align: center; } ul { position: absolute; /* 一般使用父相子绝,来进行元素定位 */ overflow: hidden; /* 清除li浮动带来的,浮动塌陷 */ width: 96px; top: 278px; /* 父级元素的高度(图片高度)300px-li的高度20px-上下边框1px*2=278px */ left: 504px; /* 父级总宽度600px-ul宽度96px=504px */ } .bj { background-color: pink; } 第三步：引入jQuery文件 第四步：写jquery代码 var arr = ['img/001.jpg', 'img/002.jpg', 'img/003.jpg']; //声明一个数组，用来存放图像路径 var k = 0; //声明一个变量，用来做数组里的索引 var t;//声明一个全局变量 //声明一个方法，用来更改图像的src属性值 function changeSrc() { k++; if (k > 2) { k = 0; //因为数组里只存放了3个元素，最大索引是2 } var path = arr[k]; //通过索引找到数组中的元素，赋值给变量path $("img").attr("src", path); //找到图像元素，设置图像的src属性值为变量path //当图像更换的时候，对应修改数字的背景色 $("li").removeClass("bj"); //先清空所有数字的背景色 $("li").eq(k).addClass("bj")//根据索引，找到数字，添加背景属性 } //jQuery入口函数 $(document).ready(function() { t =setInterval(changeSrc, 2000);//循环动画，2秒钟执行一次 $("img").mouseover(function(){ clearInterval(t) ; // 取消由 setInterval() 函数设定的定时执行操作 }); $("img").mouseout(function(){ t =setInterval(changeSrc, 2000); }) }) 部分代码分析：setInterval() 方法：按照指定的周期（以毫秒计），来调用函数或表达式（循环调用）。 clearInterval() 方法：可取消由 setInterval() 函数设定的定时执行操作。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。 注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量。 对比案例：【jQuery】前端项目实践案例4——使用jquery制作轮播图效果！ 本案例完整代码： *{ margin: 0; padding: 0; } div { width: 600px; /* 图片的宽度是600px,高度是300px */ margin: 20px auto; position: relative; } ul li { float: left; list-style: none; width: 20px; height: 20px; border: 1px solid red; margin-right: 10px; text-align: center; } ul { position: absolute; /* 一般使用父相子绝,来进行元素定位 */ overflow: hidden; /* 清除li浮动带来的,浮动塌陷 */ width: 96px; top: 278px; /* 父级元素的高度(图片高度)300px-li的高度20px-上下边框1px*2=278px */ left: 504px; /* 父级总宽度600px-ul宽度96px=504px */ } .bj { background-color: pink; } var arr = ['img/001.jpg', 'img/002.jpg', 'img/003.jpg']; //声明一个数组，用来存放图像路径 var k = 0; //声明一个变量，用来做数组里的索引 var t;//声明一个全局变量 //声明一个方法，用来更改图像的src属性值 function changeSrc() { k++; if (k > 2) { k = 0; //因为数组里只存放了3个元素，最大索引是2 } var path = arr[k]; //通过索引找到数组中的元素，赋值给变量path $("img").attr("src", path); //找到图像元素，设置图像的src属性值为变量path //当图像更换的时候，对应修改数字的背景色 $("li").removeClass("bj"); //先清空所有数字的背景色 $("li").eq(k).addClass("bj")//根据索引，找到数字，添加背景属性 } //jQuery入口函数 $(document).ready(function() { t =setInterval(changeSrc, 2000);//循环动画，2秒钟执行一次 $("img").mouseover(function(){ clearInterval(t) ; // 取消由 setInterval() 函数设定的定时执行操作 }); $("img").mouseout(function(){ t =setInterval(changeSrc, 2000); }) })
1
2
3
|
【本文地址】
公司简介
联系我们