简单的图片翻页

 1 function animatePic(){
 2                 var box=$(".list-img");
 3                 var item=box.find(".item-img");
 4                 var left;
 5                 var len=item.length;
 6                 var _w=item.width();
 7                 var w=_w*len;
 8                 var num=2;
 9                 $(".list-img").width(_w*len);
10                 $(".next").click(function(){
11                     left=box.position().left;
12                     if(left<=(w-_w*num)*-1) return false;
13                     if(!box.is(":animated")){
14                         box.animate({left:"-="+_w},500);
15                     }
16                 });
17                 $(".prev").click(function(){
18                     left=box.position().left;
19                     if(left>=0) return false;
20                     if(!box.is(":animated")){
21                         box.animate({left:"+="+_w},500);
22                     }
23                 });
24                 $(".box-img .item-img").click(function(){
25                     var src = $(this).find("img").attr("src");
26                     $("img.left-img").attr("src", src);
27                 });
28             }
时间: 2024-10-13 08:40:50

简单的图片翻页的相关文章

一款基于css3的3D图片翻页切换特效

今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="imgdex"> <figure> <img src="arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"><

android viewpager 图片翻页例子

使用ViewPager这个类可以轻松实现多个页面的滑动功能 viewpager默认在工具界面上是找不到的,需求添加android-support-v4.jar包: 如果没有找到,需要打开Android SDK Manager在Extras中进行下载,最后记得引入工程中并build path. (不过,我把代码直接COPY到.XML好像就会自动添加了) 例子说明:item01..item08是要翻页的图片,page_indicator_focused,page_indicator_unfocuse

简单做出HTML5翻页效果文字特效

之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transform属性,分别对X轴.Y轴.Z轴进行翻转,先看一下效果截图. 看效果图这些文字是不是很有立体的感觉,而这个立体的感觉并不是有投影和阴影来实现的,而是通过翻转.        DEMO演示效果 接下来我们来看一下源码.首先是HTML代码,非常简单,列出我们需要渲染的文字: <div class="

C#简单实用的翻页

C# 1 /// <summary> 2 /// 翻页 3 /// </summary> 4 using System.Text; 5 public class PageTurning 6 { 7 #region 构造函数 8 /// <summary> 9 /// 翻页 10 /// </summary> 11 /// <param name="count">页码总量</param> 12 /// <par

图片翻页效果引出的animate.css,很好玩,多动动吧~

有一个项目,客户需要页面翻转的效果,需要应用在合作伙伴里面的图片上,一共有43张图片,我把它做成了随机定时的转动,鼠标经过时转动: animate.css科普文章:http://www.dowebok.com/demo/2014/98/ http://ourjs.com/detail/animate-css%E8%AE%A9%E6%B7%BB%E5%8A%A0css%E5%8A%A8%E7%94%BB%E5%83%8F%E5%96%9D%E6%B0%B4%E4%B8%80%E6%A0%B7%E5

翻页式爬取百度图片

小编大约于这个月月初写的这一份代码,但很不幸,大概20号,再次找百度图片翻页流的时候,发现是瀑布流且回不去了,还好代码里面留了翻页流的网址 所以,现在来分享给大家. 语言:python3.6 库:requests, re, urllib 除了requests需要pip install之外,其他两个是python自带的模块,直接调用即可. 代码中的原网址:https://image.baidu.com/search/flip?tn=baiduimage&ie=utf-8&word=小姐姐&a

C#图片采集软件 自动翻页 自动分类(收集美图必备工具)

网站管理员希望将别人的整站数据下载到自己的网站里或者将别人网站的一些内容保存到自己的服务器上.从内容中抽取相关的字段,发布到自己的网站系统中.有时需要将网页相关的文件也保存到本地,如图片.附件等. 图片采集软件能采集任何网站的各种格式图片,实现把所有文章.新闻.帖子等中间的图片全部有有序列的分类后保存到您的计算机上等功能,可以把任何论坛网站的所有帖子的图片采集到本地,轻松过滤广告等,是网站.论坛站长和喜欢收集美图的朋友的必备工具. 本文演示使用C# WebBrowser控件实现自动识别下一页,按

图片延迟加载和滑动翻页

一:预加载 首先,我们需要引用JS, <script src="/Scripts/JQuery.LazyLoad.js"></script> 其次,修改img的格式为: <img data-original="/images/img01.png" src="/images/grey.gif"><span>收藏</span></a> 注意,data-original中的path

★android开发--ListView+Json+异步网络图片加载+滚动翻页的例子(图片能缓存,图片不错乱)

例子中用于解析Json的Gson请自己Google下载 主Activity: package COM.Example.Main; import java.util.HashMap; import java.util.Iterator; import java.util.LinkedList; import java.util.List; import java.util.Map; import COM.Example.Main.R; import COM.Example.Main.stringG