jQuery实现轮播切换以及将其封装成插件(1)
我们在网上经常会看到一些轮播切换的效果。轮播切换,就是在一个有限的空间中定时的像走马灯一样去播放一组图片,当然也可以通过鼠标悬停在小按钮上来切换显示。下面我们将一步一步的实现这一效果。
为保证效果,请加入平时常用的reset.css
我们要做轮播切换,首先要有一个<div></div>作为容器。为了方便查找,我为其定义了一个类“gr_UI_sliderBox”。
<div class="gr_UI_sliderBox">
</div>
.gr_UI_sliderBox {
width: 800px;
height: 400px;
background-color: #eeeeee;
margin: 0 auto;
overflow: hidden;
position: relative;
}
这样我们就完成了第一步 。看这并不复杂。不急,在下一步之前,我们先解释一下以上的代码:
我们定义了一个宽为800像素、高为400像素的区域来作为我们的轮播显示区。背景颜色是随意写的,目的是区分其他区域方便调试。“margin:0 auto;”是居中布局。而“overflow:hidden”和“position:relative;”将结合下一步讲解。
下一步:我们经在<div></div>中添加轮播的内容,我准备采用一个<ul></ul>包含多个<li></li>的方式来实现。其中每一个"li"就是我们要的一个轮播图片。
<div class="gr_UI_sliderBox">
<ul class="img_ul">
<li class="slider_Item_1"></li><li class="slider_Item_2"></li><li class="slider_Item_3"></li>
</ul>
</div>
.gr_UI_sliderBox ul.img_ul {
position: absolute;
display: block;
width: 300%;
height: 400px;
list-style: none;
} .gr_UI_sliderBox ul.img_ul li {
display: inline-block;
width: 800px;
height: 400px;
} .gr_UI_sliderBox .slider_Item_1 {
background:url(images/slider_img_1.png);
} .gr_UI_sliderBox .slider_Item_2 {
background:url(images/slider_img_2.png);
} .gr_UI_sliderBox .slider_Item_3 {
background:url(images/slider_img_3.png);
}
我们将这个“ul”作为容纳“li”的容器。注意我们将“li”设置为“display: inline-block;”是为了让其横向显示。而“ul”的宽度也设置成了“li”的3倍。这样ul就可以作为一个整体横向排列我们想轮播的3个图片了。
等一下,有没有人觉得ul的宽度比我们的div还大。没错,所以我们要回头解释div中的两个属性:
在我之前的博文中提到过“绝对定位”的概念。(即父元素position :relative;子元素position:absolute;通过top和left为子元素定位。)ul绝对定位后将从文档流中脱离出来,因此即不会'撑大'父元素也不会被父元素‘挤变形’。然后,为了让过大的子元素不溢出显示,我们将父元素设为“overflow: hidden;”这样父元素就像一个‘窗口’显示部分的ul。
如果熟悉绝对定位的朋友一定会马上反应出来。我们可以通过控制ul的“left”属性来实现轮播。没错,我们要通过javascript脚本来完成这最后一步。
function moveToCurrentByIndex(index){ $(".gr_UI_sliderBox ul.img_ul li.slider_current").removeClass("slider_current");
$(".gr_UI_sliderBox ul.img_ul li:eq(" + index + ")").addClass("slider_current");
var move_x = -index * 800;
var str_m_x = move_x + "px";
var $sliderUl = $(".gr_UI_sliderBox ul.img_ul");
$sliderUl.animate({left: str_m_x}, "slow");
$(".gr_UI_sliderBox ul.btn_ul li:eq(" + index + ")").addClass("current_btn").siblings().removeClass("current_btn");
}
我们编写上面的函数来通过“li”的下标控制轮播的定位。
.gr_UI_sliderBox .slider_current {
}
这个空的css类用来标识,当前的显示项(状态),以便定位下一个显示项。
接下来,我们需要完成定时的轮播效果。需要使用一个API:setInterval("函数", 定时间隔);
function sliderRun(){
var newCurrentIndex = $(".gr_UI_sliderBox ul.img_ul li.slider_current").index() + 1;
var liCount = $(".gr_UI_sliderBox ul.img_ul li").length;
if(newCurrentIndex >= liCount){
newCurrentIndex = 0;
}
console.log("new index : " + newCurrentIndex + " length : " + liCount);
moveToCurrentByIndex(newCurrentIndex);
}
上面的函数就是定时器调用的函数,功能为判断当前的轮播显示项,并计算出下一个轮播显示项的下标。通过新的下标调用我们的轮播定位函数。
moveToCurrentByIndex(index)
即:定时器--->计算下标--->切换显示
我们需要在jQuery的ready()中完成初始化状态和启动定时器。
$(document).ready(function(){
var tCtr;
$(".gr_UI_sliderBox ul.img_ul li:eq(0)").addClass("slider_current");
tCtr = setInterval("sliderRun()", 2000);
});
这样一个简单的轮播切换就完成了。
在下一篇文章中我们将对轮播切换进行功能的完善,让它更像平时看到的效果。
jQuery实现轮播切换以及将其封装成插件(1)的更多相关文章
- jQuery实现轮播切换以及将其封装成插件(3)
在前两篇博文中,我们写了一个普通的轮播切换.但是我们不能每一次需要这个功能就把这些代码有重新敲一次.下面我们就将它封装成一个插件. 至于什么是插件,又为什么要封装插件,不是本文考虑的内容. 我们趁着 ...
- jQuery实现轮播切换以及将其封装成插件(2)
在上一篇博文中,我们完成了一个简单的轮播切换.它的功能比较简单,仅仅能定时切换图片. 但是有没有这样一种情况.当我们特意的想看某一个轮播显示项时不希望等轮播一圈才能等到,希望通过图上的一些元素,触发某 ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 基于jquery带时间轴的图片轮播切换代码
基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="decoroll2 ...
- jQuery - 广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 3D轮播切换特效 源码
这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- CSS+jQuery实现轮播
CSS+jQuery实现轮播 CSS jQuery 前端 实现功能: 自动轮播: 鼠标放在上面停止轮播: 鼠标放在上面显示左右切换的按钮: 鼠标放在小圆圈上显示对应的图片: 轮播效果图 style. ...
随机推荐
- JavaSE---关键字---return,break,continue
1.[break] 1.1 默认 用来结束 整个循环: package com.exiuge.mytest; public class BreakTest { public static vo ...
- js写ajax并解析json
function down(t){ var req = createRequest(); //创建request req.open("GET","selectWord ...
- Java基础13-数组算法
1.数组的复制 //复制算法,将arr1数组的值复制给arr2数组 import java.util.Arrays; public class Test1{ public static void ma ...
- IntelliJ IDEA里找不到javax.servlet的jar包
此处有小坑,请注意: https://mvnrepository.com网站查询到的servlet的包的格式为: provided group: 'javax.servlet', name: 'jav ...
- 深入理解C语言函数指针(转)
本文转自:http://www.cnblogs.com/windlaughing/archive/2013/04/10/3012012.html 示例1: void myFun(int x); //声 ...
- kindEditor完整认识 PHP上调用并上传图片说明
最近又重新捣鼓了下kindeditor,之前写的一篇文章http://hi.baidu.com/yanghbmail/blog/item/c681be015755160b1d9583e7.html感觉 ...
- Supervised learning demo
监督学习案例 规范 假设函数: 使用h(hypothesis, 假设)表示 输入(input value) 向量或者实数: 使用小写字母x等 矩阵: 使用大写字母X等 输出(output value) ...
- C# 使用消息队列,包括远程访问
转:https://www.cnblogs.com/80X86/p/5557801.html 功能需求,用到了队列,用的时候出了很多问题,现在总结一下,希望能对有需要的人提供帮助. 我的需求很简单,就 ...
- The twentieth day
Knowledge is power 知识就是力量 You're unique,nothing can replace you.你举世无双,无人可以替代.
- 【翻译】Best Practices for User interface android 适配不同屏幕、不同分辨率
地址:http://developer.android.com/training/multiscreen/screendensities.html#TaskProvideAltBmp 安卓支持不同的屏 ...