JQ 图片滚动

最新推荐文章于 2022-09-15 00:01:52 发布
最新推荐文章于 2022-09-15 00:01:52 发布
阅读量1.2k 收藏
点赞数
文章标签： class iterator float scroll div function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/belialxing/article/details/6168104
版权

1、下载jcarousellite http://gmarwaha.com/jquery/jcarousellite/#download

2、加上<script src=“scripts/application/integrate/jcarousellite_1.0.1.js" type="text/javascript"></script>

3、调用

<script type="text/javascript">
   $(document).ready(function(){
    $("#jCarouselLite").jCarouselLite({
        btnNext: ".next",//按钮的class
        btnPrev: ".prev",
      auto: 2000,
      scroll: 2,
   speed: 1000
    });
   });
</script>

例子：

<html>

<head>

<script src=“scripts/application/integrate/jcarousellite_1.0.1.js" type="text/javascript"></script>

</head>

<body>

<div style="width: 85px;height: 105px;float: left"><br><br><img src="../../images/integral/leftgo.GIF" class="prev"/></div>
      <div id="jCarouselLite" style="float: left;" ><br>
      <ul class="zxgift" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px">
       <s:iterator value="awardall" var="oks">
        <li>
         <a href="${ctx }/award/award-product!detail.dhtml?entityIds=${oks.id }"><img class="gift" src="<s:property value='#oks.awardImages[0].webPath'/>" width="170" height="120" alt="${oks.name}"></a>
         <div>
          <a href="${ctx }/award/award-product!detail.dhtml?entityIds=${oks.id }">${oks.name }</a>
          <br />
          <s:if test="#oks.exchangeTypes.size==2">
           <span class="Orange">${oks.pointRequired }</span> 积分<span class="black">或</span>${oks.integralPoint }<span class="cblack">积分</span></span>+<span class="Orange">${oks.integralCash }</span>元<br />
             </s:if>
             <s:elseif test="#oks.exchangeTypes[0].code==1">
              <span class="Orange">${oks.pointRequired }</span> 积分
             </s:elseif>
             <s:else>
              <span class="Orange">${oks.integralPoint }</span><span class="cblack">积分+</span><span class="Orange">${oks.integralCash }</span><span class="cblack">元</span>
             </s:else>
         </div>
        </li>
       
       
      </s:iterator>
      </ul>

      </div>
      <div style="float: left;width: 100px;height: 105px;"><br><br><img src="../../images/integral/rbtn.gif" class="next"/></div>

</body>

 

</html>

以上是动态加载的（不可以执行）。。改为静态的就可以了。

 

不懂的留言。

belialxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用jQuery实现带滑动效果的轮播图
weixin_44195331的博客
09-22 1596
实现带滑动效果的自动轮播图的思想就是放图片的时候把原本第一张和最后一张分别在最后和开始在放一张，当滑动到实际的最后一张是，显示的是第一张的内容，其实是整个图片集的最后一张，在此时通过改变位置，让图片快速回到第一张，当然这个要在动画执行完毕后在执行，就可以实现带滑动效果的轮播效果 <body> <div id="container"> <div id="list" ...
jq图片滚动
12-19
在IT行业中，"jq图片滚动"是一个常见的网页交互效果，主要使用jQuery库来实现动态的图片展示。jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页动态效果的实现变得...
jQuery 图片滚动效果
weixin_34138139的博客
10-28 94
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery——图片循环滚动
qq_41973154的博客
09-04 688
图片循环滚动，鼠标放上时停止并且虚化其他图片。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.js" type="text/javascript" charset=...
Jquery版轮播图超详细
周百万的博客
09-15 3343
主要功能介绍： 鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况
jQuery实现图片无缝滚动
程序猿007的博客
12-26 2200
HTML代码： CSS代码： *{ margin: 0;padding: 0; } .box{ width: 1235px;height: 358px; border: 1px solid red; margin: auto; po
jquery实现图片滚动效果的简单实例
10-26
主要介绍了jquery实现图片滚动效果的简单实例，有需要的朋友可以参考一下
jq带滚动条图片滚动特效代码
03-20
【jQuery 滚动条图片滚动特效】 在网页设计中，动态效果的运用可以极大地提升用户体验，其中图片滚动特效就是一种常见的视觉呈现方式。"jQuery 带滚动条图片滚动特效"是通过 jQuery 库实现的一种功能，它可以使得...
jq图片滚动，animate()方法应用
09-13
本篇文章将深入探讨“jq图片滚动”以及如何利用jQuery的`animate()`方法来实现这一功能。`animate()`方法是jQuery库中的一个核心函数，它允许我们创建平滑的自定义动画，包括图片滚动效果。 首先，我们需要理解`...
Jq 点击滚动
11-22
描述中的“点击按钮图片横向滚动JQ 脚本！”进一步强调了这一功能的实现方式，即通过编写jQuery脚本来控制图片的滚动行为。在实际开发中，这通常包括以下几个步骤： 1. **选择器**：首先，我们需要一个jQuery选择器...
JQ的图片滚动效果，可以用鼠标点击上一页下一页来控制哦
04-21
很好用的。。。。JQ的图片滚动效果，可以用鼠标点击上一页下一页来控制哦
jquery产品图片左右自动滚动
06-18
$("#amazon_scroller3").amazon_scroller({ scroller_title_show: 'enable',//enable disable scroller_time_interval: '3000', scroller_window_background_color: "#FFF", scroller_window_padding: '10', scroller_border_size: '2', scroller_border_color: '#CCC', scroller_images_width: '80', scroller_images_height: '60', scroller_title_size: '11', scroller_title_color: '#000', scroller_show_count: '3', directory: 'images' });
Jquery实现图片左右自动滚动示例
10-26
图片左右滚动的效果想必大家都有见到过吧，其实很简单。在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的，感兴趣的朋友可以参考下
jQuery 左右图片滚动，带箭头控制
05-12
内容索引:脚本资源,jQuery,图片滚动,jQuery插件　　jQuery 左右图片滚动，带箭头控制，这种模式在网页上经常见到，个人觉得做一个相册展示相处的单元还是不错的。
jQuery动画效果实现图片无缝连续滚动
10-22
主要为大家介绍了jQuery动画效果实现图片无缝连续滚动，实现类似连续不间断的滚动广告位，感兴趣的小伙伴们可以参考一下
JQuery实现图片轮播无缝滚动
weixin_55983004的博客
06-28 1882
JQuery实现图片轮播无缝滚动
jquery实现图片滚动效果
前端岚枫
03-04 2009
jquery 图片自动无缝滚动                      ul,li { list-style: none;margin: 0; padding: 0;}        li { float: left;}        img { width: 100px; height: 100px; padding:0 2px}        .a { width: 400p
jquery 图片滚动
lichengyezi的博客
12-08 80
图片上下滚动 function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { old...
引用jQuery实现背景轮播滚动
Smallmouse96的博客
06-22 352
客户要求头部背景轮播滚动，本来是懒省事不想引插件，就自己写了一个，结果好家伙，写了一上午。不多说，直接上代码 外层.pc-first一定要设置position、width、height、overflow:hidden。#topBannerBckImg里面放的是需要展示的背景图。支持更改的属性为：bckImg：背景图item序列bckImgSum：默认显示bckImg下标的背景图bckImgSpeed：背景切换速度animateSpeed：背景切换动画时间bckImgShow：当前显示的背景图，默认值不要
jq 滚动页面加载动画
最新发布
11-15
为了实现 jq 滚动页面加载动画，我们可以使用 jq 提供的 animate() 方法来控制页面元素的动画效果。具体来说，我们可以监听页面的滚动事件，并且在滚动到特定位置时触发相应的动画效果。 首先，我们可以使用 $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值