作者: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
分享到:
相关推荐
图片轮播ViewPager实现图片轮播+手势轮播
图片轮播,js实现图片轮播,超级精彩,好用,供交流
这是用C#实现的首页图片轮播功能,用的vs2010. 当鼠标移到图片上时计时暂停,移开继续计时。
本资源是利用JS简单的仿照网站上常见的广告轮播实现图片的自动切换,来回切换,下标切换等。
jquery实现图片轮播
ImageSwither实现3d图片轮播 手势轮播
jQuery实现图片轮播,这个项目实现前端网页经常用到的图片轮播功能。主要用到HTML、CSS和jQuery技术,非常适合前端入门练习。
js图片轮播(4张图片) 很简单的一段代码 你懂的
游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播、切页按钮控制、页码下标更新、滑动轮播、切页后的回调等等 。 下面,先上一个简陋的gif动态效果图 从图中可以看出,该示例包括了三张...
点击顺序轮播按钮或倒序轮播按钮可实现每秒顺序轮播一张图片或每秒倒序轮播一张图片,点击停止轮播按钮可停止当前轮播形式。不可连续按两次顺序轮播按钮或倒序轮播按钮,但可以按完顺序轮播按钮,再按倒序轮播按钮,...
jsp 生成的html5图片轮播,已测试。支持图片预览
定时器实现图片轮播
js实现图片轮播效果 不错的资源,大家可以下载看看
该Demo是用来实现图片轮播效果的,通过ViewPager和handler来实现的
图片轮播\ViewFlipper实现图片轮播+手势轮播
使用jQuery实现图片轮播html5手机web页面
html5图片轮播插件,在移动端和PC端都可以使用,JQUERY
五张图片自动轮播,也可手动滑动,还有空心实心的小按钮显示,绝对完整
易语言大气软件图片轮播源码
JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果