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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
vue2.x数组劫持原理的实现
Apr 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
php防止sql注入代码实例
2013/12/18 PHP
destoon常用的安全设置概述
2014/06/21 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
node操作mysql数据库实例详解
2017/03/17 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Django 路由控制的实现
2019/07/17 Python
python中selenium库的基本使用详解
2020/07/31 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python 如何对logging日志封装
2020/12/02 Python
2014年上半年工作自我评价
2014/01/18 职场文书
颁奖典礼主持词
2014/03/25 职场文书
质量标语大全
2014/06/12 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
十二生肖观后感
2015/06/12 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS