`

简单的图片切换

阅读更多

 

今天写了一个jquery图片切换效果。

实现效果的方法比较简单,写这个效果主要是用于巩固自己的jquery基础。

该图片效果包含定时切换图片,下方菜单栏点击切换图片,鼠标放在显示框上时,停止自动切换图片。下面我来分享一下写这个效果的技巧。

 

 

思路:

  1. 将图片插入在class为items 的div中,并将div的position设为absolute,添加到显示框中。
  2. 点击下方菜单栏,通过index()方法获得菜单索引n,将图片框中的显示的图片隐藏, 而图片框中索引n的图片显示。
  3. 设定定时器setInterval,定时用trigger()方法模拟菜单点击事件。

Css代码:

 

/*清除浮动*/
.clearfix:after{
display: block;
visibility: hidden;
height: 0;
content: " ";
font-size: 0px;
clear: both;
}
.clearfix{
zoom:1;
}

/*将所有图片用绝对定位放在同一位置*/
items{
width: 400px;
height: 300px;
position: absolute;
left: 0px;
top: 0px;
display: none;
}

 

Jquery代码:

//hover暂停定制
$items.hover(
function() {
if(t) clearInterval(t);
},
function() {
//主意:记得在重新设置定时器前,先去除原有的定时器
if(t) clearInterval(t);
//不要写成setInterval(“init()”,”2000”),这种写法效率很低。
t = setInterval(init,2000);
}
});

 

代码下载地址:https://github.com/yeahzan/image-switcher.git 

文章地址:http://www.yeahzan.com/blog/item/change.html

 

 

 

1
0
分享到:
评论

相关推荐

    Flash简单图片切换.rar

    在本资源"Flash简单图片切换.rar"中,包含了一个基于Flash技术实现的简易图片切换功能。这个项目非常适合初学者学习,因为它展示了如何在Flash环境中创建一个具有视觉吸引力的图片幻灯片,同时提供了平滑的淡入淡出...

    图片切换-简单图片切换-带页码

    图片切换-简单图片切换-带页码 图片切换-简单图片切换-带页码

    jquery简单图片切换

    **jQuery 简单图片切换** 在网页设计中,图片轮播或切换效果是一种常见的交互功能,可以吸引用户注意力并提升用户体验。jQuery 是一个强大的 JavaScript 库,它简化了DOM操作,使得实现图片切换变得非常容易。在这...

    js 简单图片切换

    【标题】"JS简单图片切换"是一个常见的网页交互功能,常用于展示一组图片并实现动态切换,提升用户体验。在Web开发中,JavaScript是实现此类功能的主要脚本语言。本文将探讨如何利用JavaScript来创建一个简单的图片...

    js 简单图片切换 - 带标签

    【标题】"js 简单图片切换 - 带标签" 涉及到的知识点主要集中在JavaScript的DOM操作、事件处理以及HTML结构设计。这个项目可能是一个基本的图片轮播组件,通过JavaScript实现图片的自动切换,并且在图片下方显示对应...

    Jquery写的简易图片切换效果

    Jquery写的简易图片切换效果

    简单图片切换

    【简单图片切换】是一种常见的网页元素,用于在页面上展示多张图片并实现自动或用户交互式的切换效果,而无需依赖Adobe Flash技术。Flash曾是网页动态内容的主要载体,但随着移动设备和浏览器对Flash支持的减少,非...

    简单、可修改的图片切换

    本项目提供的"简单、可修改的图片切换"是一个轻量级的解决方案,适用于开发者快速构建具有图片切换功能的界面。 这个解决方案的核心在于它的简洁性和可定制性。简洁意味着代码结构清晰,易于理解和维护。对于初学者...

    简单的js图片切换,简单的js图片切换

    简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换简单的js图片切换

    android150种图片切换特效

    2. **Android 图片切换库**:Android 开发中有许多现成的库可以帮助开发者实现图片切换特效,如 Glide、Picasso 和 Fresco,它们不仅支持图片加载,还提供了简单的过渡动画。 3. **自定义动画**:Android 提供了 ...

    一个基jQuery实现最简单的图片切换特效源码例子

    这个简单的图片切换特效适用于许多场景,如网站的首页、产品展示页面、新闻滚动条等。通过结合其他jQuery插件,如Bootstrap的Carousel,可以进一步增强功能和用户体验。 以上就是基于jQuery实现最简单图片切换特效...

    一个简单的js图片切换

    采用jquery+js实现图片自动切换功能,简单,实用.

    jscode特效简单的图片切换

    【标题】"jscode特效简单的图片切换"涉及的是使用JavaScript代码实现动态的图片轮播效果。在网页设计中,图片切换是一种常见的交互功能,可以增强用户体验,尤其在展示产品图集或滑动幻灯片时非常实用。JavaScript,...

    jquery鼠标滑动按钮图片切换.zip

    jquery鼠标滑动按钮图片切换是一款网站常用的简单图片切换特效,带索引按钮,鼠标滑过自动切换。

    8种简单的图片切换效果

    这里我们将深入探讨标题“8种简单的图片切换效果”所涵盖的HTML、CSS和JavaScript技术,以及如何实现这些效果。 首先,HTML是基础结构,用于定义页面元素和布局。在图片切换效果中,我们通常会使用`<img>`标签来...

    JS多种新闻图片切换效果

    - 简单调用:这意味着使用者只需要一行或多行简单的代码,就能启动图片切换效果,无需深入理解其内部实现细节。 3. 源码解析: - DOM操作:JavaScript通过Document Object Model (DOM)来操作HTML元素,例如获取...

    js 图片切换 js 图片切换js 图片切换

    从提供的部分代码片段来看,这是一个简单的JS图片切换示例。下面我们将对这段代码进行详细解析: ```html <!DOCTYPE ...

    史上最简单的JQ图片切换

    【史上最简单的JQ图片切换】是一个使用jQuery库实现的简易图片轮播插件。这个解决方案以其简洁和易于理解的特点,适合初学者学习和快速应用到项目中。在压缩包文件中,你将找到所有必要的资源,包括HTML、CSS和...

    简单 图片 切换 代码

    这段代码实现了一个简单的图片轮播效果,主要使用了JavaScript和CSS技术。以下是对代码关键知识点的详细解释: 1. **JavaScript基础**: - `var currslid = 0`: 定义当前显示图片的索引,初始值为0。 - `setfoc...

    jQuery做的一个简单的图片切换效果

    在本项目中,我们将深入探讨如何使用jQuery实现一个简单的图片切换效果。这个效果通常应用于网站的轮播图或者产品展示部分,能够吸引用户的注意力并提升用户体验。 首先,我们需要理解HTML基础结构。`index.html`...

Global site tag (gtag.js) - Google Analytics