图片滚动

最新推荐文章于 2024-06-29 15:18:41 发布
最新推荐文章于 2024-06-29 15:18:41 发布
阅读量483 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imsasuke/article/details/8794905
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>幻灯片切换</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>


bianjijianjie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html页面中图片滚动,Html网页图片滚动代码
weixin_32644565的博客
06-03 3160
style=overflow:hidden;height:100;width:90;>id=butong_net_top2>var speed=30butong_net_top2.innerHTML=butong_net_top1.innerHTML//克隆butong_net_top1为butong_net_top2function Marquee1(){//当滚动至butong_n...
html语言图片滚动代码,[转载]Html网页图片滚动代码
weixin_28818721的博客
05-31 2598
style=overflow:hidden;height:100;width:90;>id=butong_net_top2>var speed=30butong_net_top2.innerHTML=butong_net_top1.innerHTML//克隆butong_net_top1为butong_net_top2function Marquee1(){//当滚动至butong_n...
vue 实现图片滚动
qq_33240556的博客
06-29 1020
在Vue中实现图片滚动，可以通过几种不同的方法来完成，包括使用原生CSS、JavaScript以及现有的Vue组件库。这里提供一个基本示例，展示如何结合Vue和第三方库（如vue-seamless-scroll）来实现图片的左右滚动效果。
java实现图片滚动_怎么用Java代码使图片自行滚动浏览
weixin_42510805的博客
02-13 1503
图片循环滚动代码和图片无缝滚动代码先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间。先了解一...
图片滚动显示
weixin_45743799的博客
11-17 1337
用H5实现图片滚动显示像跑马灯一样的效果。 程序详解： 图片滚动的开始和停止 鼠标的放上和移走事件 无限循环 每次滚动速度的快慢 效果演示（图片自右向左滚动） 代码演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &lt...
jquery实现图片滚动效果的简单实例
10-26
主要介绍了jquery实现图片滚动效果的简单实例，有需要的朋友可以参考一下
鼠标点击按钮图片滚动
11-16
一、图片滚动机制 图片滚动通常涉及到图像数组或集合的管理。当用户点击按钮时，程序会按照预设顺序显示或循环显示一系列图片。这种滚动可以是水平的，也可以是垂直的，根据设计需求而定。 1. 图片轮播（Carousel）...
JS图片滚动切换数字时钟代码
07-24
本主题聚焦于“JS图片滚动切换数字时钟代码”，它利用JavaScript（JS）语言来实现图片滚动和数字时钟的结合，为网站提供一个生动且实用的实时时钟模块。以下是关于这一技术的详细解释。 1. **JavaScript基础**：...
Delphi 图片滚动播放
08-20
在Delphi编程环境中，实现图片滚动播放功能是一项常见的任务，特别是在创建多媒体应用或者展示类软件时。本教程将深入探讨如何使用Delphi 7.0来实现这一功能，包括图片的加载、显示以及循环播放机制。 首先，我们...
htmlcss 图片滚动特效
06-17
"图片滚动特效"是一种常见的网页动态效果，可以增加用户交互性和视觉吸引力。在这个专题中，我们将深入探讨如何使用HTML和CSS实现这样的效果，同时也会提及JavaScript在其中可能扮演的角色。 首先，`index.html`是...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
pi_heif-0.17.0-cp39-cp39-macosx_14_0_arm64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
[毕设]酒店管理系统PPT与源码展示.zip
07-27
[毕设]酒店管理系统PPT与源码展示
企业数字化运营管理总体规划方案
最新发布
07-27
本资料围绕总体信息化规划方案、智慧运营系统建设规划方案、阶段性建设方案等方面阐述企业数字化运营管理总体规划方案。
MATLAB hough变换答题卡识别（GUI，配论文）.zip
07-27
MATLAB hough变换答题卡识别（GUI，配论文）.zip
javascript图片滚动思路
06-22
JavaScript 图片滚动通常指的是创建一个动态滚动效果，比如轮播图或懒加载图片。下面是一些基本的实现思路： 1. **轮播图**: - 使用 HTML 定义图像容器和图片列表。 - JavaScript 遍历图片列表，为每张图片设置 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值