图片轮播（自己实现）

作者：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不自动移动;
});

如果您觉得本文的内容对您的学习有所帮助，您可以微信：