简单实现图片切换 呵呵
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{
width:140px;
height:120px;
line-height:25px;
border:#ccc 0px solid;
overflow:hidden
}
#scrollDiv li{
height:25px;
padding-left:10px;
}
.paging a {
border:1px solid #FFFFFF;
color:#EEEEEE;
font-size:75%;
font-weight:bold;
margin:0pt 0pt 5px;
padding:0pt 5px;
text-decoration:none;
}
</style>
<script type = "text/javascript">
var runTime
var curNew = 0;
var news = 0;
jQuery(function ($) {
news = $('#scroll-container li');
var paging = $("#paging");
$('#scroll-container li').each(function(i,el){
var n = $("<span></span>");
paging.append(n.html("<a href=\"javascript:;\" onclick=\"javascript:curNew="+(i-1)+";scroll_news("+(i)+");\">"+(i+1)+"</a>"));
});
scroll_news(curNew);
});
function scroll_news(index){
curNew=curNew+1;
if(curNew>=news.length)curNew=0;
$('#scroll-container li').each(function(i,el){
if(index==i) {
$(el).show();
} else {
$(el).hide();
}
});
$('#paging span').each(function(i,el){
if(index==i) {
$(el).css({ background: "red" });
} else {
$(el).css({ background: "#000" });
}
});
if(runTime)window.clearTimeout(runTime);
runTime=window.setTimeout("scroll_news("+curNew+")",4000);
}
</script>
<body>
<div id="scrollDiv">
<ul id="scroll-container" style="margin-top: 0px;">
<li><img width="120" height="120" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/120/199481072_b4a0d09597_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
<li><img width="120" height="120" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>
</ul>
</div>
<div id="paging" class="paging">
</div>
</body>
分享到：
相关推荐
**jQuery 图片经典切换**是一种常见的网页动态效果，它能够为网站添加生动有趣的视觉体验，增强用户交互性。在这个主题中，我们将深入探讨如何利用jQuery库实现图片的平滑、流畅切换，以及这一过程中的关键技术和...
在这个经典的jQuery图片广告轮番切换特效中，我们可以深入探讨以下几个关键知识点： 1. **jQuery选择器**：jQuery的选择器是其强大功能的核心之一。通过使用CSS选择器，如`$("#id")`、`$(".class")`或`$("tagname")...
本文将深入探讨“2款jQuery图片自动切换常用广告代码”的核心概念、实现方式以及应用背景。 首先，jQuery图片自动切换功能通常用于网站上的轮播广告或幻灯片展示。这种功能可以吸引用户的注意力，提升用户体验，并...
"jquery,js广告切换特效"这个主题就涵盖了使用JavaScript库jQuery实现广告轮播的技巧和方法。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务，使得创建动态广告切换变...
在本主题中，“jquery图片广告横幅制作类似flash动画广告自定义横幅通栏”涉及的是利用jQuery来创建类似Adobe Flash的动态广告横幅，但无需依赖Flash技术。随着移动设备对Flash的支持逐渐减少，jQuery成为了创建此类...
【jQuery仿某视频网站广告图片左右切换代码】是一种常见的网页动态效果，用于增强用户体验，吸引用户注意力。在这款代码特效中，广告图片可以像手风琴一样左右切换，通过左右箭头来控制显示的广告组。这样的设计既...
在"jquery图片广告横幅图片滑动切换展示"这个主题中，我们将深入探讨如何利用jQuery来创建一个动态的、吸引人的图片广告横幅，实现图片的自动滑动切换效果。 首先，我们需要在HTML中设置广告横幅的基础结构。这通常...
这两款jQuery图片自动切换广告代码提供了基本的轮播功能，但实际应用中可能需要根据项目需求进行定制，例如添加键盘控制、全屏模式、自动适应不同屏幕尺寸等。在开发过程中，要确保代码的可维护性和性能优化，如合理...
jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 jQuery图片特效404 jQuery图片特效CustomAnimationBanner jQuery图片特效FullPageImageGallery jQuery图片特效image Scroller图片滚动 jQuery图片特效...
【jQuery仿京东首页广告图片切换】是一个常见的网页设计技术，主要应用于网站的首页，用于展示动态的广告轮播效果，提升用户体验并吸引用户注意力。在本项目中，我们将深入探讨如何利用jQuery库来实现这一功能。 ...
在这个"jquery定时自动切换banner广告图片动画插件示例"中，我们将深入探讨如何使用jQuery实现自动切换的广告轮播效果。 首先，我们需要了解jQuery的基本用法。jQuery的核心功能包括选择器（用于找到页面中的HTML...
这个名为"jQuery 图片广告轮番切换特效.zip"的压缩包文件，显然包含了一个使用jQuery实现的图片轮播（轮番切换）效果的代码示例或插件。 首先，我们要理解什么是图片轮播。图片轮播是一种常见的网页设计元素，通常...
**jQuery 广告图片轮播**是一种常见的网页交互效果，用于在有限的空间内展示多张图片，提升用户体验，尤其适用于网站的首页或者产品展示区。jQuery 提供的强大选择器和动画功能使得实现这一效果变得相对容易。在这个...
标题“jQuery广告图片各大商城首页流行通栏广告图片-20130702”表明这个资源是一个关于使用jQuery实现的2013年7月2日时各大电子商务平台首页上流行的通栏广告图片解决方案。jQuery是一款广泛使用的JavaScript库，它...
【标题】"jQuery图片对联广告制作jQuery侧面浮动图片广告"涉及到的是网页开发中的广告设计与实现技术，主要使用了JavaScript库jQuery来实现动态、交互式的广告效果。在这个项目中，开发者通过jQuery创建了一个侧边栏...
**jQuery 广告图片切换实例详解** 在网页设计中，广告图片切换效果是常见的动态展示方式，能够吸引用户的注意力并提升用户体验。本教程将深入探讨如何利用 jQuery 这一强大的 JavaScript 库来实现一个高效、易用的...
**jQuery 广告轮显与图片切换插件详解** 在网页设计中，吸引用户的注意力是至关重要的，而广告轮显和图片切换效果是实现这一目标的常见手法。本篇文章将深入探讨基于jQuery的广告轮显插件，以及如何利用它来创建...
"JQuery多张图片切换"是一个典型的Web前端技术应用，主要用于创建一组图片同时滑动的视觉效果。这种效果常见于产品展示、轮播广告或者相册展示等场景，使得用户能够方便地浏览一系列图片。 JQuery是一个流行的...
这个“jQuery图片滚动切换插件”是基于jQuery的一个功能组件，用于实现网页上的图片自动滚动和切换效果，常用于创建吸引人的图像展示或滑动广告。 首先，jQuery的核心特性包括选择器，它允许开发者通过CSS语法来...
jQuery电影广告图片上下滚动切换代码是一种常见的网页动态效果，它能为网站增添视觉吸引力，尤其在展示电影海报或预告片时。这个效果通常是通过利用jQuery库的强大的DOM操作和动画功能来实现的。下面我们将详细探讨...