Jquery图片滚动与幻灯片的实例代码

2024-04-18 16:48

本文主要是介绍Jquery图片滚动与幻灯片的实例代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Jquery图片滚动与幻灯片的实例代码!!

1、图片滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery图片滚动与幻灯片_http://www.jbxue.com</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Xhun(".a"); //----------------------只需要修改 ”.a" (就是最大的div的class值这里就行---------------------
});

function Xhun(_box) {
var box_frame = _box + " div ul";
var box_div = _box + " div";
$(_box).find("ul").wrap("<div></div>"); //添加一个div,来控制偏移量
$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中,为了实现无缝循环
$(box_div).append($(box_frame).clone()); //克隆一个ul并添加到div中,为了实现无缝循环
var li_size = $(_box).find("li").size(); //获取li的个数
var li_width = $(box_frame).children("li").width(); //获取li的宽度
var box_div_width = $(box_div).width(li_size * li_width * 5); //设置div的宽度
$(box_frame).css("float", "left");

var dd = setInterval(gd, 30);
function gd() {
var position = $(_box).scrollLeft(); //scrollLeft()是获取对象的水平偏移量
$(_box).scrollLeft(position + 1);
if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); } //判断位移是否大于ul的总长度
}
$(_box).mouseleave(function () {
dd = setInterval(gd, 30);
}).mouseenter(function () {
clearInterval(dd);
});
}

</script>

<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style: none; }
li { float: left; margin-left: 10px; width: 100px; }
img { width: 100px; height: 100px; }
.a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }
</style>
</head>
<body>
<div class="a">
<ul>
<li><a href="#">
<img src="Wife1.jpg" alt="img" title="img" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" alt="img" title="img" /></a></li>

</ul>
</div>
</body>
</html>

2、幻灯片
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片切换_http://www.jbxue.com</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
slide(".frame"); //----------------------只需要修改 ”.frame" (就是最大的div的class值这里就行---------------------
});

function slide(cls) {
$(cls).find("ul").wrap("<div></div>");
$(cls+" div").attr("class","iframe");
var li = $(cls).find("li").size();//统计多少张图片
var li_width = $(cls).find("li").width(); //获取li的宽度
$(cls + " div").children("ul").width(li_width * li);//设置宽度,使图片排成一排
var s = "<ul class='button'>";//生成li的按钮
for (var i = 0; i < li; i++) {
s += "<li>" + (i + 1) + "</li>";
}
s += "</ul>";
$(s).appendTo($(cls));//生成按钮结束,并添加到最大div里面
var _i = 0;//当前的编号
$(cls).find(".button li").each(function (i) {
//生成按钮点击事件
$(this).click(function () {
_i = i;
$(this).attr("class", "on").siblings().removeAttr("class");//设置class,没必要再多加一个off
$(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图片移动
});
}).eq(0).click();
function tt() {//定时器函数
_i++;
_i = _i % li;
$(cls).find(".button li").eq(_i).click();//自动点击切换图片
}
var t = setInterval(tt, 3000);//定时器
$(cls).hover(function () {
clearInterval(t);//鼠标经过清除定时器,离开时又触发
}, function () {
t = setInterval(tt, 3000);
})
}
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
li, ul { list-style: none; margin: 0; padding: 0; }
.frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这里需要修改最大div的宽度和高度*/
.iframe { overflow: hidden; width: 280px; height: 280px; } /*这里需要修改该div的宽度和高度*/
.iframe ul li { float: left; width: 280px; } /*这里需要修改li的宽度*/
.button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }
.button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }
.button .on { color: #000; background: #fff; }
</style>
</head>
<body>

<!-- 这里要按照这样的格式来写 -->

<div class="frame">
<ul>
<li><a href="#">
<img src="Wife1.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife3.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife4.jpg" width="280" height="280" alt="img" /></a></li>
<li><a href="#">
<img src="Wife5.jpg" width="280" height="280" alt="img" /></a></li>
</ul>
</div>
</body>
</html>

这篇关于Jquery图片滚动与幻灯片的实例代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/915338

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧