使用jQuery实现点击左右滑动切换特效
使用jQuery实现点击左右滑动切换特效:
HTML代码如下:
<!--整体背景div-->
<div class="warp">
<!--中间内容div-->
<div class="divContent">
<div class="content">
<ul class="contentUl">
<li>
<img src="/JS1/img/1.jpg" />
<span>生命如歌,春天似梦 </span>
<hr />
<p>生命如歌,春天似梦,初春更是如诗如画。春似花季靓女,让人悸动,春似那雍容少妇,令人憧憬</p>
</li>
<li id="second">
<img src="/JS1/img/2.jpg" />
<span>如花的季节,赞扬 </span>
<hr />
<p>一切的生命力开始复苏,温暖如我,正是如花的季节,不是吗?</p>
</li>
<li>
<img src="/JS1/img/3_1.jpg" />
<span>梦想,不休不止</span>
<hr />
<p>畏惧忍受痛苦比忍受痛苦本身更加糟糕。没有一个心灵在追逐它的梦想时会忍受痛苦。</p>
</li>
<li>
<img src="/JS1/img/4.jpg" />
<span>时间在叶子的摆动里</span>
<hr />
<p>时间会消磨一切的,她会让我们忘记的。突然想:如果我们忘记了时间,是不是想忘掉的就都能忘掉。</p>
</li>
<li>
<img src="/JS1/img/5.jpg" />
<span>异乡的海韵,落日的余辉</span>
<hr />
<p>每个人或许都有一个愿望,希望在某年某月某天可以和相爱的人牵手漫步在夕阳西下,落日余晖的海滩中,细数彼此生活的点点滴滴。</p>
</li>
<li>
<img src="/JS1/img/6.jpg" />
<span>城市夜,一个静谧的夜</span>
<hr />
<p>城市夜,一个静谧的夜。城市里,寒风瑟瑟。酒吧灯红酒绿,这,才是夜市的开始。</p>
</li>
</ul>
</div> <!--向左按钮-->
<div class="leftBtn"><img src="/JS1/img/left.png" /></div>
<!--向右按钮-->
<div class="rightBtn"><img src="/JS1/img/right.png" /></div>
</div>
</div>
JS代码如下:
$(document).ready(function(){
//向左按钮点击事件
var index = ;
var liLen;
$(".leftBtn").click(function(){
index++;
liLen = $(".content ul.contentUl li").length; //目前长度返回值为6
if(index >= )
{
$(".content ul.contentUl").stop();
alert("已经到达最后一页!");
index = ;
}else{
if(index == )
{
$(".content ul.contentUl").animate({left:-index*},);
}else{
$(".content ul.contentUl").animate({left:-index*},);
}
}
});
//向右按钮点击事件
$(".rightBtn").click(function(){
if(index == )
{
$(".content ul.contentUl").stop();
alert("这是第一页,不能再往前翻了!");
}else{
index--;
if(index == )
{
$(".content ul.contentUl").animate({left:-},);
}else{
$(".content ul.contentUl").animate({left:-index*},);
}
}
});
});
使用jQuery实现点击左右滑动切换特效的更多相关文章
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 基于jQuery左右滑动切换特效
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jQuery左侧图片右侧文字滑动切换代码
分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div cla ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
- 一款jQuery满屏自适应焦点图切换特效
一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...
- 基于jQuery编写的横向自适应幻灯片切换特效
基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6. 适用浏览器:IE6.IE7.IE8.360.Fire ...
- Fragment+ViewPager实现仿微信点击和滑动切换界面
这是在我写的新闻App中实现的界面切换 贴出切换界面的主要代码: xml代码: <span style="font-size:14px;"> <android.s ...
- jQuery实现点击开关图片切换
原型大概是这样的 image 需求:点击右侧的蓝色眼睛,会变成 关键代码: /* 实现图片切换 */ $(".imgclick").toggle(function(){ $(thi ...
随机推荐
- iOS - Phone 电话
1.调用电话 1.1 拨打系统电话 调用系统自带的打电话程序,要跳转到打电话程序,打完电话自动跳转回来. 在 iOS9.0 + 系统隐私控制里禁止查询设备中已安装的 App,所以在 iOS9.0 + ...
- Xcode7 模拟器安装app (转)
本文转自同事zz的博客http://archerzz.cn/ios/xcode-install-app.html 原由 很多时候,为了学习了解别人的app,很多时候我们是直接拿别人的app安装在自己的 ...
- Android获取网络图片
/** * * 访问网络的操作,必须放在工作线程中完成 * */ public class MainActivity extends Activity { static List<HashMap ...
- springmvc的foward和redirect跳转简单解析
Spring MVC 中,我们在返回逻辑视图时,框架会通过 viewResolver 来解析得到具体的 View,然后向浏览器渲染.假设逻辑视图名为 hello,通过配置,我们 配置某个 ViewRe ...
- Js数组排序函数sort()
JS实现多维数组和对象数组排序,用的其实就是原生sort()函数,语法为:arrayObject.sort(sortby)(sortby 可选.规定排序顺序.必须是函数.) 返回值为对数组的引用:请注 ...
- ES6(一)ECMAscript6介绍
nvm-windows Node.js是JavaScript语言的服务器运行环境,对ES6的支持度比浏览器更高.通过Node,可以体验更多ES6的特性.建议使用版本管理工具nvm,来安装Node,因为 ...
- 20169212《Linux内核原理与分析》 第十周作业
云课堂回顾学习 1. 进程调度的时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用schedule() ...
- 【转】如何保护自己的QQ号
账号丢失的原因 账号被注销 长时间未登陆 如果你的QQ号是普通号码,在连续三个月不登陆的情况下,腾讯公司会自动收回你的账号,也就意味着这个QQ号码从此再也不属于你了,会员号码是不会被收回的,要想不被收 ...
- JS学习笔记--仿手机发送内容交互
学习JS笔记----记录上课中学习的知识点,分享下老师教的内容: 1.html内容 <div id="box"> <div id="message&qu ...
- MD5加密、时间戳转换、base64算法加密、解密
#region MD5加密 /// <summary> /// MD5加密 /// </summary> /// <param name="str"& ...