作者:zccst
2014-09-21
图片轮播的思路是:
外面一个div,里面一个ul,每点击一次,ul的left向左移动一个单位的step。
如果是无缝轮播,则每次轮播到最后一个时,让第一个定位到最后一个后面。
(例子是华为官网)
2014-05-27
图片轮播这样的小功能我都花了3个小时左右,最后也没有完全搞定,可见我的基本功是多么的差。
之前遇到这类问题都是直接找现成的插件,从来没想着自己写一个,现如今想写的时候却发现无能为力,仍只好现找。
勉勉强强能加上一点自己的东西。
直接上截图:
我自己写的js
$(function(){
//alert(1);
var imgList = $(".imgList");
var leftBtn = $(".slider .left");
var rightBtn = $(".slider .right");
var len = imgList.find("li").length;
var visible_cnt = 5;//一次有5个可见
var scrollLeft = 0;
var ltimes = 0;
leftBtn.click(function(){
if($(this).attr("src") == "images/left.jpg"){
var index = imgList.find("li.active").index();
if(index > 0){
imgList.find("li").removeClass("active").eq(--index).addClass("active");
if(index==0){
$(this).attr("src","images/left-default.jpg");
}
if(index<len-1){
rightBtn.attr("src")=="images/right-default.jpg"?rightBtn.attr("src","images/right.jpg"):"";
}
}
/*
if(index-visible_cnt-1>0 && index<=len-1){
var marginRight = parseInt(imgList.find("li").width())*(++ltimes);
imgList.css({"margin-right":-marginRight});
imgList.animate({"margin-right":-marginRight},"slow");
}*/
}
});
var rtimes = 0;
rightBtn.click(function(){
if($(this).attr("src") == "images/right.jpg"){
var index = imgList.find("li.active").index();
if(index < len-1){
imgList.find("li").removeClass("active").eq(++index).addClass("active");
if(index == len-1){
$(this).attr("src","images/right-default.jpg");
}
if(index>0){
leftBtn.attr("src")=="images/left-default.jpg"?leftBtn.attr("src","images/left.jpg"):"";
}
}
/*
if(index>visible_cnt-1 && index<=len-1){
var marginLeft = parseInt(imgList.find("li").width())*(++rtimes);
imgList.css({"margin-left":-marginLeft});
imgList.animate({"margin-left":-marginLeft},"slow");
}*/
}
});
function init(){
var index = imgList.find("li.active").index();
if(index<=0){
leftBtn.attr("src","images/left-default.jpg");
}
if(index==len-1){
rightBtn.attr("src","images/right-default.jpg");
}
imgList.width(imgList.find("li").width()*len);
}
init();
});
下面是插件相关的。
//默认状态下左右滚动
$("#s1").xslider({
unitdisplayed:4,
movelength:1,
unitlen:176,
autoscroll:3000
});
$(".productshow").xslider({//.productshow是要移动对象的外框;
unitdisplayed:3,//可视的单位个数 必需项;
movelength:1,//要移动的单位个数 必需项;
maxlength:null,//可视宽度或高度 默认查找要移动对象外层的宽或高度;
scrollobj:null,//要移动的对象 默认查找productshow下的ul;
unitlen:null,//移动的单位宽或高度 默认查找li的尺寸;
nowlength:null,//移动最长宽或高(要移动对象的宽度或高度) 默认由li个数乘以unitlen所得的积;
dir:"H",//水平移动还是垂直移动,默认H为水平移动,传入V或其他字符则表示垂直移动;
autoscroll:1000//自动移动间隔时间 默认null不自动移动;
});
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
- 大小: 21.7 KB
分享到:
相关推荐
图片轮播是一种常见的网页元素,用于展示一组图片并自动切换,为用户提供动态视觉体验。JavaScript(简称JS)作为客户端脚本语言,常被用来实现这种交互式功能。在这个主题中,我们将深入探讨如何使用JavaScript来...
本文将深入探讨如何使用JavaScript实现一个简单的图片轮播功能,这将包括自动切换、手动切换以及下标指示器的实现。 首先,我们需要准备HTML结构。一个基本的图片轮播组件通常包含一个容器元素,用于存放所有图片,...
2. **CSS3**:CSS3是实现图片轮播视觉效果的关键。可以使用CSS3的过渡(transition)和动画(animation)属性来实现图片的平滑切换效果。同时,可以设计按钮样式,例如空心实心的小按钮,以及图片的布局和定位。使用...
在本文中,我们将深入探讨如何使用C#编程语言在ASP.NET环境中实现一个图片轮播功能。这个功能在网站的首页上十分常见,用于展示产品、新闻或者任何其他需要动态显示的图片序列。当我们提到“图片轮播”,通常指的是...
三、图片轮播实现 1. 结构:一个基本的图片轮播通常包含一个容器(如`<div>`),里面放置多个图片(`<img>`)或者`<figure>`元素。每个图片都有一个对应的隐藏状态,以便于轮播切换。 2. 动画效果:jQuery提供了`...
本示例将详细讲解如何通过源码实现一个简单的Android图片轮播器。 首先,我们来看看标题提到的“史上最简单Android图片轮播效果实现”。通常,这种效果可以通过ViewPager组件来完成,它是Android SDK中的一个强大...
这种结合可以实现服务器端与客户端的交互,为用户提供更加丰富的网页体验,比如图片轮播功能。 在HTML5中,图片轮播通常使用`<img>`标签来展示图片,并通过CSS3来控制动画效果,如滑动过渡、淡入淡出等。此外,...
在本文中,我们将深入探讨如何使用Windows Presentation Foundation (WPF) 实现一个自定义的图片轮播控件。WPF是.NET Framework中的一个强大的UI框架,它提供了丰富的图形功能和强大的数据绑定机制,使得创建美观且...
在这个3D图片轮播实现中,手势轮播是一个重要的组成部分,它允许用户通过简单的手势来控制图片的切换,提供更加直观和自然的互动体验。 首先,我们来深入理解ImageSwitcher。ImageSwitcher是Android SDK中的一个...
【JS实现5张图片轮播效果】是一种常见的网页动态效果,用于展示一组图片并自动进行切换,提升用户体验。在这个项目中,我们有以下几个关键知识点: 1. **JavaScript基础**:JavaScript是网页动态效果的主要实现语言...
本项目“页面实现多个图片轮播功能demo”旨在教你如何使用原生JavaScript来实现这一功能,同时通过调用同一函数实现代码复用,避免冗余。 一、图片轮播基本原理 图片轮播的核心原理是改变图片的显示状态,通常通过...
在IT领域,图片轮播是一种常见的网页元素,用于展示多张图片或内容,通常用于产品展示、广告轮播等场景。本篇文章将聚焦于“图片轮播”的多种实现方式...通过不断实践和学习,你可以创建出符合自己需求的图片轮播组件。
在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现3D图片轮播效果。WPF是Microsoft提供的一种强大的用户界面框架,它允许开发者创建丰富的、交互式的桌面应用程序,其中包括对2D和3D图形...
图片轮播是一种常见的网页元素,用于展示一组图片并自动进行切换,为用户提供动态且吸引人的视觉体验。...通过这样的实践,开发者可以提升自己的综合技能,并创造出符合现代网页标准的高质量图片轮播组件。
通过理解并实践这些知识点,开发者不仅可以创建一个基本的图片轮播,还可以根据需求进行扩展,例如添加点击事件、实现自定义过渡效果等。这不仅提高了用户体验,也为应用程序增添了视觉吸引力。
游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播、切页按钮控制、页码下标更新、滑动轮播、切页后的回调等等 。 下面,先上一个简陋的gif动态效果图 从图中可以看出,该示例包括了三张...
本项目提供的"winform图片轮播控件.zip"文件包含了一个用C#语言实现的Winform图片轮播组件。下面将详细阐述该控件的相关知识点以及如何使用。 首先,我们要理解Winform的基本概念。Windows Forms是.NET Framework的...
jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果,因此非常适合用来实现图片轮播功能。本文将详细探讨如何使用 jQuery 来创建一个图片轮播。 一、jQuery 基础 在开始图片轮播的...
开发者可以通过研究这些代码,学习如何在自己的项目中实现图片轮播和缩放。在实际操作中,需要注意性能优化,例如使用懒加载策略减少初次加载时的图片数量,以及利用CSS3硬件加速提升图片变换的流畅度。 总之,图片...