<html>
<head>
<style>
div#MainPromotionBanner{
width:490px;
height:240px;
background:#f4ffe7;
overflow:hidden;
position:relative;
}
div#MainPromotionBanner .sliderContent div{
width:490px;
height:240px;
overflow:hidden;
margin:0 0 0 0;
padding:0 0 0 0;
border-width:0;
}
</style>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.mbSlider ={
width:0,
height:0,
// 数字样式
trigerCss : {
width:16, height:16,
'background-color':'#FFFFFF', 'margin':'2 5 2 5',
'float':'left', 'text-align':'center',
'font-size':'100%', 'color':'#74A8ED',
'border-style': 'solid', 'border-width':1,
'border-color':'#74A8ED'},
// 当前数字样式
trigerCss02 : {
width:20, height:20, 'margin-top':4,
'background-color':'#74A8ED','border-color':'#CCDEF7',
'font-size':'150%', 'color':'#FFFFFF'},
// 包含数字的DIV样式
trigerDivCss : {
position: 'absolute', left:50,
'height':22,'vertical-align':'middle'}
};
jQuery.fn.initMbSlider = function (width, height){
var container = this;
container.mbSlider.width = width;
container.mbSlider.height = height;
// 鼠标指向时设置变量停止循环
$('.sliderContent',container).css({position: 'relative'}).hover(
function(){
$(container).attr('state', 'stop');
}, function(){
$(container).attr('state', 'start');
}
);
container.mbSlider.wwidth=width;
counts = $('div', $('.sliderContent',container)).length;
$('.sliderContent',container).append($(document.createElement('div')).html($($('.sliderContent',container)[0]).html()));
// 创建包含数字的DIV
var trigerDiv = $(document.createElement('div')).css(container.mbSlider.trigerDivCss).css({top:height-30}).addClass('trigerDiv');
var i = 0;
// 根据广告数量添加触发数字
for(i = 0; i < counts; i++){
var title = $($('div img', $('.sliderContent',container))[i]).attr('alt');
trigerDiv.append(
$(document.createElement('div')).css({margin:'5px'}).css(container.mbSlider.trigerCss).attr('num',i)
.attr('alt',title).attr('title',title).append(i+1).hover(function(){
$(container).attr('indexNum', $(this).attr('num'));
sliderMove(container.attr('id'),counts);
})
);
}
// 设置触发器的位置
trigerDivtrigerDiv = trigerDiv.css({left:width-(counts*28+20)});
container.append(trigerDiv);
// 设置计数器
this.attr('indexNum', 0);
sliderMove(this.attr('id'), counts);
// 设置循环显示
setInterval("sliderMove('"+this.attr('id')+"',"+counts+");",1000);
}
function sliderMove(sliderId, count){
if($('#'+sliderId).attr('state') != 'stop'){
var container = $('#'+sliderId);
var preIndexNum = Number(container.attr('preIndexNum'));
var indexNum = Number(container.attr('indexNum'));
//$($('.trigerDiv div', container)[indexNum]).mouseover();
//alert(preIndexNum);
if(indexNum==1 && preIndexNum ==count){
$('.sliderContent',container).css({top:'0px'});
}
if(indexNum==0 && preIndexNum == count-1){
indexNum = count;
$('.trigerDiv div', container).css(container.mbSlider.trigerCss);
$('.trigerDiv div', container).css({margin:'5px'});
$($('.trigerDiv div', container)[0]).css(container.mbSlider.trigerCss02);
$('.sliderContent',container).stop().animate({top:(-1*(container.mbSlider.height)*count)+'px'});
}else{
$('.trigerDiv div', container).css(container.mbSlider.trigerCss);
$('.trigerDiv div', container).css({margin:'5px'});
$($('.trigerDiv div', container)[indexNum]).css(container.mbSlider.trigerCss02);
$('.sliderContent',container).stop().animate({top:(-1*(container.mbSlider.height)*$($('.trigerDiv div', container)[indexNum]).attr('num'))+'px'});
}
container.attr('preIndexNum', indexNum);
indexNum = (indexNum + 1) % count;
container.attr('indexNum', indexNum);
}
}
</script>
</head>
<body>
<div id="MainPromotionBanner">
<div class="sliderContent">
<div><a href="#"><img src="cut_image_0_0.jpg" alt="1111111"/></a></div>
<div><a href="#"><img src="cut_image_0_1.jpg" alt="2222222"/></a></div>
<div><a href="#"><img src="cut_image_0_2.jpg" alt="3333333"/></a></div>
<div><a href="#"><img src="cut_image_0_3.jpg" alt="4444444"/></a></div>
</div>
</div>
<script type="text/javascript">$('#MainPromotionBanner').initMbSlider(490,240);</script>
</body>
</html>
'margin':'auto 5' 在$('.triger div', container).stop().animate(trigerCss01);中时，在IE中会出错，应该分开
分享到：
相关推荐
jQuery ScrollPane 是一个强大的插件，它提供了丰富的定制选项，使得创建图片滑动效果变得轻而易举。本篇文章将深入探讨如何使用 jQuery ScrollPane 实现图片滑动效果，并分享相关的代码实现。 首先，我们需要了解 ...
这对于创建图片滑动效果至关重要。 二、图片滑动效果原理 1. 图片轮播：实现多图片左右滑动，通常采用轮播（Carousel）的效果，即将一组图片放在一个容器内，通过改变图片的位置来达到切换显示的效果。 2. 数据...
在图片滑动效果中，我们可以使用`.animate()`来实现图片的淡入淡出或左右滑动。 3. **事件监听**：jQuery提供了`.on()`方法来绑定各种事件，如点击事件`click`、定时事件`setInterval`等。通过监听用户的行为或设定...
对于滑动图片效果，jQuery提供了强大的API和方法，使得创建复杂的动画效果变得轻松。 ### 一、基础准备 首先，确保在HTML文件中引入jQuery库。你可以通过CDN链接或者本地文件引用。例如： ```html ...
在本案例中，我们主要利用jQuery的DOM操作和事件处理功能。 1. **DOM操作**：jQuery提供了简洁的API来选择、添加、删除和修改HTML元素。在图片滚动效果中，我们需要选中包含图片的容器，然后通过CSS操作改变其样式...
通过分析这些文件，你可以更深入地理解如何使用jQuery来创建图片滑动效果，并将其应用到自己的项目中。 总的来说，jQuery图片滑动效果图片切换是一个结合了CSS样式、HTML结构和jQuery脚本的综合示例，展示了如何...
"jQuery全屏图片滑动"是一个利用JavaScript库jQuery实现的高效解决方案，它允许设计师创建出流畅、动态的全屏图片轮播效果。本插件主要由limitedrol开发，并可能包含sillycnd的相关资源，旨在为用户提供便捷的交互...
1. **轮播图（Carousel）**：这是一种常见的图片滑动效果，通常用于网站的首页或者产品展示。利用jQuery，我们可以设定定时器让图片按照预设顺序自动切换，同时提供手动控制按钮让用户自行选择前后滑动。例如，`...
"jQuery左右伸缩滑动效果"是一种常见的JavaScript特效，它广泛应用于导航菜单、图片轮播、内容切换等多个场景。jQuery库以其简洁的API和丰富的插件，为开发者提供了实现这种效果的便利。本文将详细介绍如何利用...
为了实现图片滑动效果，我们可以编写JQuery代码来控制图片的显示和隐藏。以下是一个简单的例子： ```javascript $(document).ready(function() { var slideIndex = 0; showSlides(); function showSlides() { ...
通过研究这个文件，开发者可以学习如何构建和定制自己的图片3D滑动效果。 总的来说，jQuery图片3D滑动是一种高级的前端技术，结合HTML、CSS3和jQuery，可以创建出令人印象深刻的交互式用户体验。然而，实现这样的...
本主题聚焦于使用jQuery创建一个滑动图片展示效果，这是一个常见且吸引人的视觉展示技术，适用于产品展示、照片画廊等多种场景。 jQuery滑动图片展示通常涉及以下关键知识点： 1. **jQuery选择器**：jQuery的选择...
这个“jquery插件库-jquery图片滑动效果.zip”文件显然是一个包含jQuery插件的集合，特别关注于实现图片滑动效果。这种效果常见于网站的轮播图、产品展示或相册功能，可以增强用户体验，使得网页更具动态性和吸引力...
本主题将深入探讨如何利用jQuery实现图片滑动切换效果，这种效果常用于网站的幻灯片展示或者产品轮播等场景。 一、jQuery基本概念与应用 jQuery 的核心理念是“write less, do more”，它通过封装JavaScript的一些...
这个项目“jquery实现的图片滑动并带有放大镜效果代码”显然是利用 jQuery 实现了一个功能丰富的图片展示功能，包括图片轮播和放大镜效果。下面我们将详细探讨这些知识点。 首先，图片轮播（Slider）是一种常见的...
【jQuery二张图片滑动对比效果代码】是一种常见的网页交互设计，它利用JavaScript库jQuery实现了一种动态展示两张图片差异的特效。用户可以通过平移一个滑块，左右对比两张图片，这种效果常用于产品展示、前后对比...
本文将深入探讨如何利用jQuery实现这种酷炫的图片滤镜效果，并结合提供的文件进行详细解析。 首先，我们要理解jQuery是什么。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax...
这个特效利用了jQuery的事件监听、DOM操作以及动画功能，使得当鼠标悬停在图片上时，图片上会覆盖一层半透明遮罩，并在遮罩上动态滑动显示相关文字描述。 首先，jQuery库是JavaScript的一个轻量级框架，它简化了DOM...
在本教程中，我们将深入探讨如何使用jQuery来创建一个仿腾讯视频图片滑动门切换效果。这个效果通常用于展示多张图片，通过平滑过渡在它们之间切换，为用户提供一个吸引人的视觉体验。以下是实现这一效果的关键知识点...
在jQuery中，我们可以利用其内置的动画方法如`.fadeIn()`、`.fadeOut()`或`.slideToggle()`来创建滑动效果。 1. **基本原理** - 图片轮换通常通过隐藏和显示图片实现。初始时，第一张图片可见，其他图片隐藏。 - ...