`

JQ 最少代码实现多图切换

阅读更多

 这个是偶实现的方法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>最简单的多图切换</title>
<link rel="stylesheet" href="base.css" />
<style>
.banner{ width: 200px; height: 120px; margin: 80px auto 0 auto;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<div class="banner">
	<img src="img/aaa.png" id="slide" width="200" height="120">
</div>
<script>
$(function() {
	simpleSlide();
});
function simpleSlide(){
	var index = 0;
	var arr = ['aaa.png', 'bbb.png', 'ccc.png'];
	setInterval(function(){
		index == (arr.length - 1) ? index = 0 : index ++;
		$("#slide")[0].src = 'img/' + arr[index];
	}, 4000);
}
</script>
</body>
</html>

 

结果群友(大树)实现了更简单的方法

function simpleSlide(){
	var index = 0;
	var arr = ['aaa.png', 'bbb.png', 'ccc.png'];
	setInterval(function(){
		index++;
		$("#slide")[0].src = 'img/' + arr[index%arr.length];
	}, 4000);
}

 

 效果图:

 

 

 

 

 

 

  • 大小: 35.6 KB
1
0
分享到:
评论

相关推荐

    JQ 最少代码实现选项卡切换

    标题 "JQ 最少代码实现选项卡切换" 涉及到的是使用 jQuery(简称 JQ)库来创建一个简洁的选项卡切换效果。在网页设计中,选项卡是一种常见的用户界面元素,它允许用户在有限的空间内查看多个相关的但不同时显示的...

    JQ 最少代码实现title标签切换内容

    标题 "JQ 最少代码实现title标签切换内容" 指的是使用jQuery库来实现一个功能,即在网页上动态地切换元素的`title`属性内容。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互...

    JQ 最少代码实现无缝滚动

    **标题:“JQ最少代码实现无缝滚动”** 在网页设计中,为了提供用户更好的浏览体验,无缝滚动效果常被用于长列表或者图片展示。JQuery(简称JQ)作为一个轻量级、功能丰富的JavaScript库,提供了简单易用的API来...

    JQ 最少代码实现全选和不全选

    标题“JQ最少代码实现全选和不全选”涉及到的是如何使用jQuery来控制多选框(checkboxes)的全选与反选功能。这种功能常见于数据管理界面,用户可以快速选择或取消选择所有项目。下面将详细解释这一知识点。 一、...

    JQ 最少代码实现带数字和箭头的焦点图

    本主题聚焦于如何使用最少的jQuery代码来创建一个具有数字指示器和箭头切换功能的焦点图。焦点图通常用于在网页上展示一组图片或内容,用户可以通过点击或自动轮播来切换。 首先,让我们了解焦点图的基本结构。它...

    JQ 最少代码实现当前的星期加时间

    这个标题提到的“最少代码实现当前的星期加时间”,意味着我们要讨论如何使用jQuery来获取当前日期,并显示星期与时间,而且代码量要尽可能地精简。 在JavaScript中,我们可以使用内置的`Date`对象来获取当前日期和...

    JQ 最少代码实现导航的下拉菜单

    在本文中,我们将深入探讨如何使用JavaScript库JQuery(简称JQ)来创建一个高效的、最少代码实现的导航栏下拉菜单。下拉菜单在现代网页设计中是必不可少的元素,它能帮助用户轻松访问网站的多层次结构。下面,我们将...

    JQ幻灯片,多图切换

    【标题】"JQ幻灯片,多图切换"是一个基于jQuery实现的动态展示多张图片的滑动效果。在网页设计中,幻灯片组件常用于网站的首页或者产品展示区域,它能够以优雅的方式循环播放一组图片或内容,为用户带来良好的交互...

    基于JQ的大图横向切换效果

    "基于JQ的大图横向切换效果"是一个使用JQuery库实现的 banner(横幅)特效,它为网站的首屏或者其他重要区域提供了一种优雅的方式来展示多张大图,并且通过平滑的动画效果进行切换,从而增加网站的互动性和吸引力。...

    JQ 最少代码实现中部浮窗功能

    本篇文章将深入探讨如何利用JQ最少的代码实现中部浮窗(也称中间弹窗或悬浮框)功能。中间浮窗通常用于显示重要的通知、广告或者用户交互内容,它会始终保持在屏幕中央,即使页面滚动也是如此。 首先,我们需要创建...

    jq代码图片切换

    在这个"jq代码图片切换"的主题中,我们将深入探讨如何利用jQuery实现动态的图片切换效果,这是一种常见的增强用户体验的交互功能。 首先,我们需要理解jQuery的基本用法。jQuery的核心思想是"Write Less, Do More...

    JQ轮播图代码,考呗可用

    【标题】"JQ轮播图代码,考呗可用"所指的知识点是关于使用jQuery库实现轮播图效果的编程技巧。jQuery是一款轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在网页设计中,轮播图是一种...

    jquery图片轮播图多图切换效果(带小图左右箭头)

    本文将深入探讨“jquery图片轮播图多图切换效果(带小图左右箭头)”这一主题,包括其核心技术和实现方式。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。在创建图片...

    jQuery背景和banner图片一起切换全屏焦点图切换代码

    本示例中的"jQuery背景和banner图片一起切换全屏焦点图切换代码"是利用jQuery实现的一种交互式用户体验,它允许网页的背景图片与banner(横幅)图片同步切换,从而创造出更具吸引力的视觉效果。 首先,我们需要理解...

    JQ 用最少代码实现瀑布流布局

    在前端开发中,jQuery库提供了简单易用的API,使得开发者能够以最少的代码实现这种布局。 在本文中,我们将深入探讨如何使用jQuery实现瀑布流布局。首先,我们需要理解瀑布流布局的基本原理。通常,它涉及到以下几...

    jq仿京东商城商品分类滑动切换效果

    "jq仿京东商城商品分类滑动切换效果"是一个基于jQuery实现的网页动态效果,它模仿了京东商城的商品分类展示方式,让用户在浏览商品时能便捷地切换不同的类别。这种效果使得网站更加直观、易用,增加了用户对网站的...

    jQ品牌logo列表选项卡切换.zip

    "jQ品牌logo列表选项卡切换"是一个专为软件公司网站设计的JavaScript特效,用于实现品牌logo的动态展示和选项卡切换功能。这个特效使得用户可以方便地浏览和了解公司的合作品牌或者支持的品牌,通过视觉效果吸引用户...

    JQ 最简单的切换图兼容IE6

    标题“JQ 最简单的切换图兼容IE6”指的是使用jQuery库实现一个图片切换功能,并且这个功能能够在老旧的Internet Explorer 6浏览器上正常工作。在Web开发中,尤其是在早期,兼容旧版本的浏览器,尤其是IE6,是一个...

    jQ手机排行榜标题滑动切换代码.zip

    【标题】"jQ手机排行榜标题滑动切换代码"是一个专为手机网站设计的jQuery特效,主要用于在排行榜区域实现标题的滑动切换效果。这种效果能够提升用户在小屏幕设备上的浏览体验,使得有限的屏幕空间得以充分利用,同时...

Global site tag (gtag.js) - Google Analytics