<BODY>
<div class="wrapper">
<h1>基础版轮播图</h1>
<div class="slide" id="oSlide">
<div class="img_list">
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369090318281627599.jpg" alt="" /></a>
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369091497468585125new.jpg" alt="" /></a>
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369091555230427210.jpg" alt="" /></a>
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369091647802017426.jpg" alt="" /></a>
<a href=""><img src="http://ossweb-img.qq.com/upload/adw/image/201305/1369091708549002379.jpg" alt="" /></a>
</div>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script src="http://gamevip.qq.com/portal/v1/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var oSlide = {
i: 0,
ex: false,
aID: 0,
bID: 0,
slide: function(){
var len = $('.img_list a').length;
if (oSlide.i < (len - 1)){
oSlide.i++;
}else{
oSlide.i=0;
}
$('.img_list a').fadeOut('fast').eq(oSlide.i).fadeIn('fast');
$('.num li').removeClass('on').eq(oSlide.i).addClass('on');
},
guideHover: function(){
$('.num li').mouseover(function(){
if (!$(this).hasClass('on')){
oSlide.i = ($(this).index())-1;
oSlide.slide();
}
});
},
init: function(){
if (!$('#oSlide')){
return;
}
oSlide.aID = setInterval(oSlide.slide,3000);
oSlide.guideHover();
}
};
oSlide.init();
</script>
</BODY>
分享到：
相关推荐
"JavaScript轮播图案例展示"是关于如何使用JavaScript来创建这样一个功能的实例教程。 轮播图的基本结构通常包括以下几个部分： 1. 图片容器：这是轮播图的基础，用于存放所有待展示的图片。 2. 显示区域：只显示...
JavaScript应用实例-轮播图.js
如果默认的轮播图效果不能满足需求，我们可以通过自定义样式和JavaScript逻辑来实现。例如，添加过渡动画、动态加载图片、设置不同样式的指示点等。 五、优化与性能考虑 1. 图片懒加载：对于大量图片的轮播图，可以...
在本文中，我们将深入探讨如何使用JavaScript实现一个经典的图片轮播图效果，这在前端开发中是一项常见的任务。我们将分析两种不同的实现方法：普通函数法和面向对象封装法。同时，我们也会涉及到与HTML和CSS的配合...
3. **JavaScript基础**：小程序中的业务逻辑和数据管理主要通过JS实现，包括数据绑定、事件处理、API调用等。 4. **微信小程序API**：了解并熟练使用微信小程序提供的API，如页面路由管理（`wx.navigateTo`、`wx....
- `js`文件夹中的脚本（如`script.js`）负责轮播图的动态交互功能。JavaScript代码会监听用户的点击事件，处理图片的自动切换，以及更新小圆点的选中状态。通常，它会包含一个定时器来实现自动轮播，`...
本资源包含纯JavaScript实现的三种不同类型的轮播图，这对于熟悉JavaScript和想要提升前端技能的开发者来说，是一份非常有价值的参考资料。 1. **基本轮播图实现**： - 基本的轮播图通常包括自动播放、手动切换和...
实现轮播图的常见技术有HTML/CSS/JavaScript，以及在移动应用中的Android和iOS平台上的各种库。对于Web开发，Bootstrap的Carousel组件或纯CSS方法如Slick和Swiper是流行的选择。在Android中，我们可以使用ViewPager...
轮播图的实现方式多种多样，常见的技术包括纯CSS（层叠样式表）、JavaScript、jQuery以及各种前端框架如Bootstrap、Vue.js、React.js等。从这个文件名来看，这个轮播图可能不涉及任何JavaScript库，而是使用了HTML和...
"图片轮播模板-轮播图样式"这个主题主要涉及到JavaScript（js）、HTML这两个关键技术，用于实现动态的图片切换效果。下面将详细讲解这两个技术以及如何结合它们创建一个图片轮播功能。 首先，HTML（HyperText ...
最后查看JavaScript代码，了解其如何控制轮播图的行为。通过实践和修改这些代码，你可以加深对轮播图原理的理解，同时提升自己的前端开发技能。 总之，"综合案例-轮播图素材代码.zip"是一个很好的学习资源，它涵盖...
学生作业-轮播图和待办，该项目为html前端项目，主要实现轮播图和待办事件录入和一键清除功能。涉及html、js、css。
然后，JavaScript文件中负责初始化轮播图数据和处理用户交互。例如，你可以这样定义数据和方法： ```javascript Page({ data: { imageList: [ 'http://example.com/image1.jpg', '...
在`App.js`和`Page.js`中，可能会有与轮播图相关的生命周期方法，如`onLoad`用于加载数据，`onShow`用于每次显示页面时更新数据，`onReady`用于确认页面渲染完成等。 8. **动画效果**： 为了提供更佳的用户体验，...
通过分析这个源码，你可以了解到微信小程序如何利用WXML、WXSS和JavaScript三者配合，实现一个具有动态效果的轮播图。同时，这也提供了一个学习和研究微信小程序开发的实例，有助于加深对小程序开发流程和技巧的理解...
JS实现轮播图滑动效果，涉及一些比之前复杂一些的操作
轮播图淡入淡出效果，自学JavaScript看过来，课程资源充足
在本教程中，我们将深入探讨如何实现一个基本的自动轮播图，主要关注JavaScript和jQuery的使用。 一、HTML结构 首先，我们需要创建HTML结构来承载轮播图。通常，轮播图包含多个图片或内容块，以及左右切换的箭头和...
3. JavaScript 基础：JS负责处理轮播图的动态效果。这包括切换图片、计算动画时间、响应用户交互等。可以使用事件监听（如`click`事件）来捕捉用户的操作，然后执行相应的函数。 4. 变量与数据结构：在JS中，我们...