jquer 带左右按钮滚动图片 点击显示大图
<style>
ul{ list-style:none; padding:0px; margin:0px;}
li{ list-style:none; padding:0px; margin:0px;}
.big_pic{ width:300px; height:300px; overflow:hidden; padding-bottom:20px;}
#pic_box{ width:510px; height:200px; overflow:hidden;}
.pic_bon_left{ width:10px; cursor:pointer; height:200px; vertical-align:middle; float:left}
.pic_cen{ float:left; width:480px; padding:5px; overflow:hidden;}
.pic_cen ul{ list-style:none; overflow:hidden; height:160px;}
.pic_cen ul li{ list-style:none; width:100px; height:160px; float:left; padding-right:10px;}
.pic_cen ul li img{ width:96px; height:160px;}
.pic_bon_right{ width:10px; cursor:pointer; height:200px; vertical-align:middle; float:right}
</style>
<div class="big_pic"><img src="img/1.jpg" id="bigimg" /></div>
<div id="pic_box">
<div class="pic_bon_left"><</div>
<div class="pic_cen">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
</ul>
</div>
<div class="pic_bon_right">></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var prev=$(".pic_bon_left");
var next=$(".pic_bon_right");
var img=$(".pic_cen ul");
var flag="left";
var ad;
var w=$(".pic_cen ul li").outerWidth(true); //outerWidth(options)获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效 $(".pic_cen ul li").click(function(){
$src=this.getElementsByTagName("img")[0].src;
$("#bigimg").attr("src",$src);
}); next.click(function(){
img.animate({"margin-left":-w},function(){
img.find("li").eq(0).appendTo(img); //在被选元素img 结尾(仍位于内部) 加入加'eq(0):第一个'li
img.css({"margin-left":0});
});
var flag="left";
}); prev.click(function(){
img.find('li:last').prependTo(img); //在被选元素img 开头(仍位于内部) 加入最后一个li
img.css({"margin-left":-w});
img.animate({"margin-left":0});
var flag="right";
}); $("#pic_box").hover(function(){
clearInterval(ad);
},function(){
ad=setInterval(function(){flag == "left" ? next.click() : prev.click()},3000);
}).trigger("mouseleave"); });
</script>
jquer 带左右按钮滚动图片 点击显示大图的更多相关文章
- WPF图片浏览器(显示大图、小图等)
原文:WPF图片浏览器(显示大图.小图等) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangshubo1989/article/details ...
- ueditor 复制word里面带图文的文章,图片可以直接显示
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 http://www.17sucai.com/pins/demoshow/382
- 【demo练习三】:图片水平滚动、点击按钮变更图片动画
要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
- jquery带按钮的图片切换效果
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
随机推荐
- Java 集合 LinkedList的ListIterator
Java 集合 LinkedList的ListIterator @author ixenos 摘要:ListIterator<E>是继承自Iterator<E>的接口.list ...
- JSP+Servlet实现上传下载
0.项目结构 1.在WebRoot下创建index.jsp页面 <%@ page language="java" import="java.util.*" ...
- SQLServer乱码问题的分析及解决方法(中文字符被存入数据库后,显示为乱码)
注:本文为个人转存,原文地址:http://blog.csdn.net/qiuyu8888/article/details/8021410 问题:SQL版在使用过程中有时会出现乱码,我的症状是中文字符 ...
- C#读取和写入文件
一.读取文件 如果你要读取的文件内容不是很多, 可以使用 File.ReadAllText(FilePath) 或指定编码方式 File.ReadAllText(FilePath, Encoding) ...
- infix to postfix 完整版
#include<iostream> #include<stack> #include<string> #include<deque> using na ...
- Django中Admin样式定制
Django自带的admin在展示数据是样式有点单一,我们可以自己定义数据的展示样式. 一.自定义数据展示样式 1.后台查询书记列表时,同时列出出版社和出版时间: admin.py文件 from dj ...
- 朱丽叶—Cuda+OSG
#include <cuda_runtime.h> #include <osg/Image> ; typedef struct cuComplex { float r; flo ...
- 分布式事务、XA、两阶段提交、一阶段提交
本文原文连接:http://blog.csdn.net/bluishglc/article/details/7612811 ,转载请注明出处! 1.XA XA是由X/Open组织提出的分布式事务的规范 ...
- C# 几个特殊运算符的理解和Nullable<T> 的研究
可空值类型和?运算符 谈到运算符,大家一定很熟悉,但是对所有的运算符都能掌握吗? 看了下面代码再回答. Nullable<Int32> count = ; ; bool? flag = f ...
- redis数据类型:Strings
String是最简单的数据类型,一个key对应一个value,string类型是二进制安全的,redis的String可以包含任何数据, 比如jpg图片或者系列化的对象. Set方法: 设置key对应 ...