`
zccst
  • 浏览: 3287111 次
  • 性别: 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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics