jQuery图片左右滚动代码 有左右按钮实例
用jquery封装了一个控制图片左右滚动的插件，有左右按钮可以点击实现图片滚动效果。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>slide</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script><br><style>
* {
padding:0;
margin:0;
list-style: none
}
img{
border: none
}
#img-slider, #img-slider-2 {
position: relative;
width: 560px;
height: 80px;
}
.slider-wrap {
width: 480px;/*width的值要跟所有的li宽度总和一样*/
overflow: hidden;
position: relative;
height: 150px;
margin-left: 40px;
}
.slider-wrap ul {
zoom: 1;
position: absolute;
left: 0;
top: 0;
width: 9999px;
}
.slider-wrap ul li {
float: left;
width: 120px;
text-align: center;
padding: 5px 0;
}
#prev, #next {
position: absolute;
top: 30px;
left: 0px;
width: 40px
}
#next {
left: auto;
right: 0px
}
</style><br><script type="text/javascript">
$(function () {
$("#img-slider").imgScroll();
$("#img-slider-2").imgScroll();
});
/*插件*/
(function ($) {
$.fn.imgScroll = function () {
var isDone = false,
scrollBox = $(this),
prevBtn = scrollBox.find("#prev"),
nextBtn = scrollBox.find("#next"),
imgBox = scrollBox.find("ul"),
next_over = imgBox.find("li").width() * imgBox.find("li").length,
slide_width = $(".slider-wrap").width();
return this.each(function(){
function setOpacity() {
imgBox.animate({
opacity: 1
}, 800,function(){
isDone = false;
})
}
function scrollNext() {
if(!isDone && next_over + parseInt(imgBox.css("left"),10) > slide_width){
isDone = true;
imgBox.animate({
left: "+=" + "-" + slide_width,
opacity: 0.5
}, 800, setOpacity);
}
//isDone = false
}
function scrollPrev() {
if(!imgBox.is(':animated') && parseInt(imgBox.css("left"),10) !=0){
imgBox.animate({
left: "+=" + slide_width,//不断左移
opacity: 0.5
}, 800, setOpacity);
}
}
prevBtn.bind('click', scrollPrev); //向前滚动
nextBtn.bind('click', scrollNext); //向后滚动
})
}
})(jQuery);
</script>
</head>
<body>
<div id="img-slider">
<button id="prev">prev</button>
<div class="slider-wrap">
<ul>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
</ul>
</div>
<button id="next">next</button>
</div>
<div id="img-slider-2">
<button id="prev">prev</button>
<div class="slider-wrap">
<ul>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
<li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li>
</ul>
</div>
<button id="next">next</button>
</div>
</body>
</html>
大家可以直接复制上面的代码，保存成html测试。
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio
-
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
jquery左右滚动焦点图banner图片,鼠标经过显示上下页 适合宽和高都比较大的页面使用 演示 复制代码 代码如下: <div class="bannerbox"> <div id="focus"> <ul> <li><a href="http://www.freejs.net/" target="_blank"> <img src="../da
-
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大
-
jQuery图片左右滚动代码 有左右按钮实例
用jquery封装了一个控制图片左右滚动的插件,有左右按钮可以点击实现图片滚动效果. 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>slide</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquer
-
js jquery做的图片连续滚动代码
核心代码如下,大家可以参考 复制代码 代码如下: <script src="/js/jquery.js"></script> <script> $(document).ready(function(){ $(".bannerbutton li").each( function(){ $(this).click(
-
jquery 多行滚动代码(附详细解释)
复制代码 代码如下: <!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=&qu
-
jQuery 图片切换插件(代码比较少)
复制代码 代码如下: // JavaScript Document ;(function($){ $.fn.extend({ "zj_ppt":function(value){ //默认参数定义 var $this = $(this); value = $.extend({ "time":2000, //间隔变化动画时间 "con":0, "sto":true, "count":"count&qu
-
图片无缝滚动代码(向左/向下/向上)
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,
-
图片连续滚动代码[兼容IE/firefox]
var sliderwidth=300 //设置滚动宽度 var sliderheight=150 //设置流动高度 var slidespeed=3 //设置滚动带度(1-10)1的滚动速度最慢 slidebgcolor="#ffffff" //滚动区域的背景色 var leftrightslide=new Array() var finalslide='' leftrightslide[0]='' //设置图片地址及其链接地址. leftrightslide[1]='' leftr
-
JQuery的自定义事件代码,触发,绑定简单实例
自定义事件触发 复制代码 代码如下: $ event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. 复制代码 代码如下: $(this).bind("myEventName",function(){ alert("myEventName triggered"); });
-
jquery实现图片平滑滚动详解
本文实例为大家分享了jquery图片平滑滚动效果的具体代码,供大家参考,具体内容如下 随便写了个DOM,没有美观性,见谅 原理: 1.定义两组ul列表放图,第一个ul放5张图,第二个ul为空 2.为什么要用两个ul?因为要用到jQuery的克隆方法clone().把第一个ul的图片全部克隆到第二个ul中,形成并列无缝滚动效果 3..box设置为绝对定位,.wrap设置为相对定位 4.设置定时器,让.box的left值一直减-,当left值大于第一个ul的长度时,让他left等于0,然后再重新重置
-
JS实现图片横向滚动效果示例代码
复制代码 代码如下: <!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=&qu
-
js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: <!DOCTYPE html> <html