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 相关文章推荐
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 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
Views rows style模板重写代码
2011/05/16 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
详解python中的线程
2018/02/10 Python
python中的json总结
2018/10/11 Python
python生成lmdb格式的文件实例
2018/11/08 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python版中国省市经纬度
2020/02/11 Python
keras 读取多标签图像数据方式
2020/06/12 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
美国Max仓库:Max Warehouse
2020/05/31 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
售房协议书范本2014
2014/10/23 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python