`
zccst
  • 浏览: 3315937 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

图片轮播(自己实现)

阅读更多
作者: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
分享到:
评论

相关推荐

    图片轮播,js实现图片轮播

    图片轮播是一种常见的网页元素,用于展示一组图片并自动切换,为用户提供动态视觉体验。JavaScript(简称JS)作为客户端脚本语言,常被用来实现这种交互式功能。在这个主题中,我们将深入探讨如何使用JavaScript来...

    JS简单实现仿网页图片轮播

    本文将深入探讨如何使用JavaScript实现一个简单的图片轮播功能,这将包括自动切换、手动切换以及下标指示器的实现。 首先,我们需要准备HTML结构。一个基本的图片轮播组件通常包含一个容器元素,用于存放所有图片,...

    图片轮播完整实现

    2. **CSS3**:CSS3是实现图片轮播视觉效果的关键。可以使用CSS3的过渡(transition)和动画(animation)属性来实现图片的平滑切换效果。同时,可以设计按钮样式,例如空心实心的小按钮,以及图片的布局和定位。使用...

    用C#实现的图片轮播

    在本文中,我们将深入探讨如何使用C#编程语言在ASP.NET环境中实现一个图片轮播功能。这个功能在网站的首页上十分常见,用于展示产品、新闻或者任何其他需要动态显示的图片序列。当我们提到“图片轮播”,通常指的是...

    图片轮播HTML5

    三、图片轮播实现 1. 结构:一个基本的图片轮播通常包含一个容器(如`&lt;div&gt;`),里面放置多个图片(`&lt;img&gt;`)或者`&lt;figure&gt;`元素。每个图片都有一个对应的隐藏状态,以便于轮播切换。 2. 动画效果:jQuery提供了`...

    史上最简单Android图片轮播效果实现 源码程序

    本示例将详细讲解如何通过源码实现一个简单的Android图片轮播器。 首先,我们来看看标题提到的“史上最简单Android图片轮播效果实现”。通常,这种效果可以通过ViewPager组件来完成,它是Android SDK中的一个强大...

    jsp图片轮播html

    这种结合可以实现服务器端与客户端的交互,为用户提供更加丰富的网页体验,比如图片轮播功能。 在HTML5中,图片轮播通常使用`&lt;img&gt;`标签来展示图片,并通过CSS3来控制动画效果,如滑动过渡、淡入淡出等。此外,...

    WPF实现的图片轮播控件

    在本文中,我们将深入探讨如何使用Windows Presentation Foundation (WPF) 实现一个自定义的图片轮播控件。WPF是.NET Framework中的一个强大的UI框架,它提供了丰富的图形功能和强大的数据绑定机制,使得创建美观且...

    ImageSwither实现3d图片轮播 手势轮播

    在这个3D图片轮播实现中,手势轮播是一个重要的组成部分,它允许用户通过简单的手势来控制图片的切换,提供更加直观和自然的互动体验。 首先,我们来深入理解ImageSwitcher。ImageSwitcher是Android SDK中的一个...

    JS实现5张图片轮播效果

    【JS实现5张图片轮播效果】是一种常见的网页动态效果,用于展示一组图片并自动进行切换,提升用户体验。在这个项目中,我们有以下几个关键知识点: 1. **JavaScript基础**:JavaScript是网页动态效果的主要实现语言...

    页面实现多个图片轮播功能demo

    本项目“页面实现多个图片轮播功能demo”旨在教你如何使用原生JavaScript来实现这一功能,同时通过调用同一函数实现代码复用,避免冗余。 一、图片轮播基本原理 图片轮播的核心原理是改变图片的显示状态,通常通过...

    图片轮播(多种实现)

    在IT领域,图片轮播是一种常见的网页元素,用于展示多张图片或内容,通常用于产品展示、广告轮播等场景。本篇文章将聚焦于“图片轮播”的多种实现方式...通过不断实践和学习,你可以创建出符合自己需求的图片轮播组件。

    WPF3D图片轮播效果

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现3D图片轮播效果。WPF是Microsoft提供的一种强大的用户界面框架,它允许开发者创建丰富的、交互式的桌面应用程序,其中包括对2D和3D图形...

    图片轮播 新浪图片轮播 雅虎图片轮播

    图片轮播是一种常见的网页元素,用于展示一组图片并自动进行切换,为用户提供动态且吸引人的视觉体验。...通过这样的实践,开发者可以提升自己的综合技能,并创造出符合现代网页标准的高质量图片轮播组件。

    图片无限轮播的实现

    通过理解并实践这些知识点,开发者不仅可以创建一个基本的图片轮播,还可以根据需求进行扩展,例如添加点击事件、实现自定义过渡效果等。这不仅提高了用户体验,也为应用程序增添了视觉吸引力。

    Unity实现图片轮播组件

    游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播、切页按钮控制、页码下标更新、滑动轮播、切页后的回调等等 。 下面,先上一个简陋的gif动态效果图 从图中可以看出,该示例包括了三张...

    winform图片轮播控件.zip

    本项目提供的"winform图片轮播控件.zip"文件包含了一个用C#语言实现的Winform图片轮播组件。下面将详细阐述该控件的相关知识点以及如何使用。 首先,我们要理解Winform的基本概念。Windows Forms是.NET Framework的...

    jquery实现图片轮播

    jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果,因此非常适合用来实现图片轮播功能。本文将详细探讨如何使用 jQuery 来创建一个图片轮播。 一、jQuery 基础 在开始图片轮播的...

    图片轮播、图片缩放

    开发者可以通过研究这些代码,学习如何在自己的项目中实现图片轮播和缩放。在实际操作中,需要注意性能优化,例如使用懒加载策略减少初次加载时的图片数量,以及利用CSS3硬件加速提升图片变换的流畅度。 总之,图片...

Global site tag (gtag.js) - Google Analytics