jQuery slider Content

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量691 收藏
点赞数
分类专栏： UI设计相关 文章标签： jquery class function javascript float div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lammy0926/article/details/4563925
版权

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
  <script type="text/javascript">
       function animate(dir, step) {
            var position;
            position = parseInt($("#content").css("margin-left"));
            var contentwidth;
            var sliderwidth;
            contentwidth = parseInt($("#content").css("width"));
            sliderwidth = parseInt($("#slider").css("width"));
            //alert(position);
            switch (dir) {
                case "right":
                    position = ((position - step) < (sliderwidth - contentwidth)) ? (sliderwidth - contentwidth) : (position - step);
                    break;
                case "left":
                    position = ((position + step) > 0) ? 0 : (position + step);
                    break;
                default:
                    break;

            };
            //alert(position);
            $("#content").animate(
                        { marginLeft: position + "px" },
                        800
                    );
        }
        $(document).ready(function() {
            $("#slider").css("width", ($("body").attr("clientWidth") - 80) + "px");
            $("#leftA").click(function() {
                animate("left", 400);
            });
            $("#rightA").click(function() {
                animate("right", 400);
            });
           
        });
  </script>
   <style type="text/css">
        ul,li{
            display:block;
        }
        li{
            width:150px;
            float:left;
        }
        #content
        {
            width: 2030px;
            margin-left: 0px;
        }
        #slider
        {
            margin-left: 40px;
            overflow: hidden;
        }
        #leftA
        {
            display: block;
            float: left;
            left: 10px;
            top: 5px;
            position: absolute;
            background-image: url();
        }
        #rightA
        {
            display: block;
            float: right;
            right: 10px;
            top: 5px;
            position: absolute;
            background-image: url();
        }
    </style>
 <body>
  <div class="title_bar">
    <a id="leftA" href="javascript:void(0);" >
        left
        </a>
        <div id="slider">
            <div id="content">
                <ul id="Ul1" class="tab_nav" style="margin-left: 0px; margin-right: 0px;">
                    <li id="gaom1" class="menuon" >
                        基本信息</li>
                    <li id="gaom2" class="menuoff" >
                        基本信息</li>
                    <li id="gaom3" class="menuoff" >
                        基本信息</li>
                    <li id="gaom4" class="menuoff" >
                        基本信息</li>
                    <li id="gaom5" class="menuoff" >
                        基本信息</li>
                    <li id="gaom6" class="menuoff" >
                        基本信息</li>
                    <li id="gaom7" class="menuoff" >
                        基本信息</li>
                    <li id="gaom8" class="menuoff" >
                        基本信息</li>
                    <li id="gaom9" class="menuoff" >
                        基本信息</li>
                    <li id="gaom10" class="menuoff" >
                        基本信息</li>
                    <li id="gaom11" class="menuoff" >
                        基本信息</li>
                </ul>
            </div>
        </div>
    <a id="rightA" href="javascript:void(0);" >
        right</a>
    </div>
</body>

Lammy0926
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【ES6知识点】
qq_48687155的博客
08-20 833
ES6知识点
jquery slider图片插件制作带文字遮罩图片轮播切换代码
11-13
jQuery Slider是一种广泛应用于网页设计中的组件，它能够展示一系列图像，并通过用户交互（如点击或自动播放）进行动态切换。这种功能可以增强网站的视觉吸引力，同时为用户提供更丰富的信息展示方式。 首先，我们...
jQuery slider Content(左右控制移动)
12-11
不错的效果。好多文字广告可以这样控制。 ul,li{ display:block; } li{ width:150px; float:left; } #content { width: 2030px; margin-left: 0px; } #slider { margin-left: 40px; overflow: hidden; } #leftA { display: block; float: left; left: 10px; top: 5px; position: absolute; background-image: url(); } #rightA { display: blo
jquery slider_使用jQuery / CSS通过分页创建自己的Content-Slider
从零开始的教程世界
07-08 824
jquery sliderThis Article is in continuation with the tutorial on “Creating Photo-Slider using CSS and jQuery” in “Sliders” series. This will cover following topics in order:- 本文是“ 滑块 ”系列中“ 使用CSS和jQue...
jquery.easing.1.3.js和jquery.ennui.contentslider.js
06-01
Chili是一个优秀的用于代码语法高亮的jquery插件。官方下载地址是：http://code.google.com/p/jquery-chili-js/。 官方提供的下载包能够很好地对javascript、php、sql、css、html、C++、C#、Delphi、java、locus这十种开发语言进行语法高亮。
slidercontent 基于jquery的内容区滑动切换效果
08-18
slidercontent 基于jquery的内容区滑动切换效果 slidercontent 基于jquery的内容区滑动切换效果
Jquery Slider 插件 lyhucSlider
weixin_30731305的博客
08-10 119
　　前自己两天写了一个Jquery Slider插件，效果图如下： 　　 　　支持IE 6.0以上 　　 　　silderShowAdContentTitle_bg.gif 　　silderShowAdContentTitle_overbg.png <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
jquery slider_带有jQuery和CSS3的非常简单的Content Slider
culiao9310的博客
09-29 236
jquery sliderView demo 查看演示Download Source 下载源Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in th...
jquery slider_jQuery的Slider Gallery
culiao9310的博客
09-28 203
jquery sliderView demo 查看演示Download Source 下载源This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area ...
jQuery slider实现手风琴特效.rar
09-05
本主题聚焦于如何使用jQuery slider来实现手风琴（Accordion）特效。手风琴效果是一种常见的用户界面元素，它可以将大量内容以折叠的方式展示，用户可以逐个展开或关闭各个部分，使得页面保持简洁而不失信息的完整性...
featured-content-slider.zip_jquery featured
09-24
【标题】"featured-content-slider.zip_jquery featured" 涉及到的是一个使用jQuery和jQuery UI库构建的特色内容滑动展示组件。这个组件通常用于网站的首页或重要区域，以吸引用户注意力并动态地展示多块内容，如...
自制taobao首页的slider
ancui2761的博客
06-10 73
由于时间久了图片失效了我就不负责了。。 ps:用position:relative做实在是太恶心了。。我以为用js修改dom结构…… css: #slider { position: relative; width: 470px; } img { ...
jQuery基础——DOM
m0_54066656的博客
08-27 2029
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1676
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 6072
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 920
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 609
vue.js 3
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值