jQuery实现图片左右滚动特效


Posted in Javascript onApril 20, 2020

本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考,具体如下:

一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止自动滚动,鼠标离开自动滚动,点击左右按钮左右滚动Logo切换网页特效。可用于网站底部作为合作伙伴展示或友链展示的特效,是一款非常优秀的特效源码。

运行效果图:----------------------查看效果 下载源码-----------------------

jQuery实现图片左右滚动特效

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery合作伙伴左右滚动特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery合作伙伴左右滚动特效 - 三水点靠木</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="js/ss.js"></script>
</head>
<body>
<div style="width:685px; margin:0 auto">
<div class="mr_t1 mt14">
 <div class="mr_t1name">
 <img src="images/mt_ico6.jpg" />合作伙伴
 </div>
</div>
<div class="mr_frbox">
 <img class="mr_frBtnL prev" src="images/mfrL.jpg" width="28" height="46" />
 <div class="mr_frUl">
 <ul>
 <li><a href="//3water.com" target="_blank"><img src="images/mfr_1.jpg" width="123" height="52" /></a><a href="//3water.com" target="_blank"><img src="images/mfr_2.jpg" width="123" height="52" /></a></li>
 <li><a href="//3water.com" target="_blank"><img src="images/mfr_3.jpg" width="123" height="52" /></a><a href="//3water.com" target="_blank"><img src="images/mfr_6.jpg" width="123" height="52" /></a></li>
 <li><a href="//3water.com" target="_blank"><img src="images/mfr_4.jpg" width="123" height="52" /></a><a href="//3water.com" target="_blank"><img src="images/mfr_7.jpg" width="123" height="52" /></a></li>
 <li><a href="//3water.com" target="_blank"><img src="images/mfr_5.jpg" width="123" height="52" /></a><a href="//3water.com" target="_blank"><img src="images/mfr_8.jpg" width="123" height="52" /></a></li>
 </ul>
 </div>
 <img class="mr_frBtnR next" src="images/mfrR.jpg" width="28" height="46" />
</div>
<script language="javascript">
$(".mr_frUl ul li img").hover(function(){$(this).css("border-color","#A0C0EB");},function(){$(this).css("border-color","#d8d8d8")});
jQuery(".mr_frbox").slide({titCell:"",mainCell:".mr_frUl ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:4});
</script>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源:<a href="//3water.com/" target="_blank">三水点靠木</a></p>
</div>
</body>
</html>

以上就是为大家分享的jQuery合作伙伴左右滚动特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
浅析node.js的模块加载机制
May 25 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 #Javascript
jquery图片滚动放大代码分享(1)
Aug 25 #Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 #Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 #Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 #Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 #Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 #Javascript
You might like
Phpbean路由转发的php代码
2008/01/10 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
python异步任务队列示例
2014/04/01 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
小学新学期教师寄语
2014/01/18 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
高中教师个人工作总结
2015/02/10 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
总结Python使用过程中的bug
2021/06/18 Python
Python必备技巧之字符数据操作详解
2022/03/23 Python