jQuery箭头控制图文左右滚动代码.zip_带箭头控制的图片滑动特效资源-CSDN下载

共27个文件

gif：13个

jpg：11个

js：1个

版权申诉

javascript

html5

jQuery

199 浏览量 2022-11-21 11:32:11 上传评论收藏 215KB ZIP 举报

在前端开发中，jQuery库因其简洁的API和强大的功能而被广泛应用。本示例"jQuery箭头控制图文左右滚动代码"旨在教你如何使用jQuery、CSS和HTML5来创建一个图文可左右滑动的效果，通常用于展示产品或信息列表。这个功能可以提升用户界面的互动性和用户体验。我们需要理解基本的HTML结构。为了实现这个效果，我们需要一个包含图片和文字的容器。HTML5的`<div>`标签非常适合做这个容器，我们可以给它一个ID，例如"scroll-container"，方便在JavaScript中引用。 ```html <div id="scroll-container"> <div class="item">  <img src="image1.jpg" alt="Image1"> <p>描述1</p> </div> <div class="item">  <img src="image2.jpg" alt="Image2"> <p>描述2</p> </div>  </div> ``` 接下来，我们用CSS来设置样式。这包括设置容器的宽度、溢出隐藏以及图文项的布局。CSS中的`overflow-x: hidden;`用于隐藏超出容器宽度的内容，`white-space: nowrap;`则让子元素不换行，这样我们就可以通过改变它们的位置来实现水平滚动。 ```css #scroll-container { width: 100%; /* 自适应宽度 */ overflow-x: hidden; white-space: nowrap; } .item { display: inline-block; /* 其他样式，如间距、宽高等 */ } ``` 现在，我们需要jQuery来处理箭头点击事件。确保在页面中引入jQuery库。然后，我们可以添加左箭头和右箭头的HTML元素，以及相应的事件监听器。 ```html <button id="prev">左箭头</button> <button id="next">右箭头</button> ``` 在JavaScript中，我们可以获取当前可视的最左边图文项，然后根据箭头的点击来改变其位置。这里需要用到jQuery的`scrollLeft()`和`animate()`方法。 ```javascript $(document).ready(function() { var container = $('#scroll-container'); var itemWidth = $('.item').outerWidth(); // 获取图文项的宽度 var currentIndex = 0; function moveSlide(direction) { var scrollPosition = container.scrollLeft(); if (direction === 'prev') { currentIndex--; if (currentIndex < 0) { currentIndex = $(container.children('.item')).length - 1; } } else if (direction === 'next') { currentIndex++; if (currentIndex >= $(container.children('.item')).length) { currentIndex = 0; } } var newPosition = -(currentIndex * itemWidth); container.animate({scrollLeft: newPosition}, 500); // 平滑滚动 } $('#prev').on('click', function() { moveSlide('prev'); }); $('#next').on('click', function() { moveSlide('next'); }); }); ``` 这个例子展示了如何使用jQuery、CSS和HTML5创建一个具有箭头控制的图文左右滚动效果。通过结合这些技术，你可以创建出各种动态、交互性强的网页元素，提升用户的浏览体验。在实际应用中，你还可以根据需要进行定制，比如添加自动轮播、指示器等更多功能。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery箭头控制图文左右滚动代码.zip （27个子文件）

jQuery箭头控制图文左右滚动代码

jQuery箭头控制图文左右滚动代码.jpg 93KB

jiaoben1973

css

zzsc.css 5KB

images

01.jpg 11KB

tt19.gif 625B

tt22.gif 509B

tt20.gif 647B

icon.gif 1KB

04.jpg 9KB

tt18.gif 578B

tt16.gif 599B

tt17.gif 596B

ppbz.jpg 897B

11.jpg 15KB

zzbz.gif 831B

10.jpg 8KB

a.gif 43B

241_4d9c2b7e_1a24_415e_acb2_6882f58c3806_8.jpg 2KB

tt13.gif 1KB

12.jpg 10KB

03.jpg 8KB

bg01.gif 100B

02.jpg 7KB

tt21.gif 580B

09.jpg 25KB

tt23.gif 653B

index.html 11KB

jquery1.4.2.js 70KB

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery箭头控制图文左右滚动代码 - 网页模板</title> <link type="text/css" rel="stylesheet" href="images/zzsc.css"> <script type="text/javascript" src="js/jquery1.4.2.js"></script> </head> <body> <div id="contentE" class="area"> <div class="cons"> <div class="con" style="left: 0px;"> <div class="left wdA">  <div class="tBG"></div> <div class="bord"> <h2><span><a href="#" target="_blank"><img alt="青春偶像" src="images/tt16.gif" width="66" height="20"></a></span><a href="#" target="_blank"><img src="images/zzbz.gif" width="47" height="20"></a></h2> <div class="info"><a style="COLOR: #75a503" href="#" target="_blank">你的青春你做主</a></div> <div class="pic"><a href="#" target="_blank"><img alt="飞一般爱情小说" src="images/01.jpg" width="120" height="165"></a><span><strong><a href="#" target="_blank">飞一般爱情小说</a></strong></span><span class="label"><i></i><em>击败所有同类青春片</em></span></div> <div class="line"></div> <div class="list12"> <ul> <li><a href="#" target="_blank">美丽传说</a> <font color="#666666">　高分港剧</font></li> <li><a href="#" target="_blank">北极光</a> <font color="#666666">　蓝正龙耍帅</font></li> <li><a href="#" target="_blank">春蚕织梦</a> <font color="#666666">年代偶像剧</font></li> </ul> </div> <div class="more"><a href="#" target="_blank">更多>></a></div></div></div>  <div class="left wdC"> <div class="tBG"></div> <div class="bord"> <h2><span><a href="#" target="_blank"><img alt="伊人剧场" src="images/tt18.gif" width="66" height="20"></a></span></h2> <div class="info"><a style="COLOR: #be49b7" href="#" target="_blank">女人最爱男人回避</a></div> <div class="pic"><a href="#" target="_blank"><img alt="咕咕是一只猫" src="images/02.jpg" width="120" height="165"></a><span><strong><a href="#" target="_blank">咕咕是一只猫</a></strong></span><span class="label"><i></i><em>催人泪下的真事改编</em></span></div> <div class="line"></div> <div class="list12"> <ul> <li><a href="#" target="_blank">春草</a> 　<font color="#666666">林妙可登荧屏</font></li> <li><a href="#" target="_blank">萍踪侠影</a> <font color="#666666">稚嫩范冰冰</font></li> <li><a href="#" target="_blank">幸福的完美</a> 　<font color="#666666">印小天</font></li> </ul> </div> <div class="more"><a href="#" target="_blank">更多>></a></div></div></div>  <div class="left wdE"> <div class="tBG"></div> <div class="bord"> <h2><span><a href="#" target="_blank"><img alt="家庭情感" src="images/tt20.gif" width="66" height="20"></a></span><a href="#" target="_blank"><img src="images/zzbz.gif" width="47" height="20"></a></h2> <div class="info"><a style="COLOR: #8455c7" href="#" target="_blank">爱恨情仇家长里短</a></div> <div class="pic"><a href="#" target="_blank"><img alt="爱有来生" src="images/03.jpg" width="120" height="165"></a><span><strong><a href="#" target="_blank">爱有来生</a></strong></span><span class="label"><i></i><em>俞飞鸿筹备多年情感作</em></span></div> <div class="line"></div> <div class="list12"> <ul> <li><a href="#" target="_blank">小姨多鹤</a> 　<font color="#666666">孙俪姜文</font></li> <li><a href="#" target="_blank">笑着活下去</a> <font color="#666666">杨幂主演</font></li> <li><a href="#" target="_blank">天伦劫</a> <font color="#666666">战争中的家庭</font></li> </ul> </div> <div class="more"><a href="#" target="_blank">更多>></a></div></div></div>  <div class="left wdH"> <div class="tBG"></div> <div class="bord"> <h2><span><a href="#" target="_blank"><img alt="悬疑谍战" src="images/tt23.gif" width="66" height="20"></a></span></h2> <div class="info"><a style="COLOR: #828181" href="#" target="_blank">生于60年永远不Out</a></div> <div class="pic"><a href="#" target="_blank"><img alt="救命" src="images/04.jpg" width="120" height="165"></a><span><strong><a href="#" target="_blank">救命</a></strong></span><span class="label"><i></i><em>“鬼后”李心洁惊悚</em></span></div> <div class="line"></div> <div class="list12"> <ul> <li><a href="#" target="_blank">誓言</a>　 <font color="#666666">钟镇涛演公安</font></li> <li><a href="#" target="_blank">血玲珑</a> <font color="#666666">王姬母爱爆棚</font></li> <li><a href="#" target="_blank">谈判专家</a>　 <font color="#666666">欧阳震华</font></li> </ul> </div> <div class="more"><a href="#" target="_blank">更多>></a></div></div></div>  <div class="left wdG"> <div class="tBG"></div> <div class="bord"> <h2><span><a href="#" target="_blank"><img alt="军事战争" src="images/tt22.gif" width="66" height="20"></a></span><a href="#" target="_blank"><img alt="" src="images/zzbz.gif" width="47" height="20"></a></h2> <div class="info"><a style="COLOR: #6a815e" href="#" target="_blank">男人世界的刀光剑影</a></div> <div class="pic"><a href="#" target="_blank"><img alt="罗马，不设防的城市" src="images/12.jpg" width="120" height="165"></a><span><strong><a href="#" target="_blank">罗马，不设防的城市</a></strong></span><span class="label"><i></i><em>大师费里尼编剧作品</em></span></div> <div class="line"></div> <div class="list12"> <ul> <li><a href="#" target="_blank">洪湖赤卫队</a> <font color="#666666">经典翻拍</font></li> <li><a href="#" target="_blank">投名状</a> <font color="#666666">四大巨星主演</font></li> <li><a href="#" target="_blank">勇者无敌</a> 　<font color="#666666">媲美潜伏</font></li> </ul> </div> <div class="more"><a href="#" target="_blank">更多>></a></div></div></div>  <div class="left wdB"> <div class="tBG"></div> <div class="bord"> <h2><span><a href="#" target="_blank"><img alt="白领剧场" src="images/tt17.gif" width="66" height="20"></a></span><a href="#" target="_blank"><img alt="" src="images/ppbz.jpg" width="55" height="12"></a></h2> <div class="info"><a style="COLOR: #638aa0" href="#" target="_blank">人人都是杜拉拉 </a></div> <div class="pic"><a href="#" target="_blank"><img alt="神经侠侣" src="images/11.jpg" width="120" height="165"></a><span><strong><a href="#" target="_blank">神经侠侣</a></strong></span><span class="label"><i></i><em>陈奕迅+容祖儿</em></span></div> <div class="line"></div> <div class="list12"> <ul> <li><a href="#" target="_blank">溏心风暴</a> <font color="#666666">港剧新经典 </font></li> <li><a href="#" target="_blank">OK公司</a> <font color="#666666">老剧笑料百出 </font></li> <li><a href="#" target="_blank">万事如意</a> <font color="#666666">编辑部故事 </font></li> </ul> </div> <div class="more"><a href="#" target="_blank">更多>></a></div></div></div>  <div class="left wdD"> <div class="tBG"></div> <div class="bord"> <h2><span><a href="#" target="_blank"><img alt="精英剧场" src="images/tt19.gif" width="66" height="20"></a></span></h2> <div class="info"><a style="COLOR: #4894c7" href="#" target="_blank">精英智商大考验</a></div> <div class="pic"><a href="#" target="_blank"><img alt="可可西里" src="images/10.jpg" width="120" height="165"></a><span><strong><a href="#" target="_blank">可可西里</a></strong></span><span class="label"><i></i><em>评价最高的陆川作品</em></span></div> <div class="line"></div> <div class="list12"> <ul> <li><a href="#" target="_blank">上海王</a> <font color="#666666">袁立大气演绎</

评论收藏

内容反馈

版权申诉