图片Slider 带左右按钮的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="Content-Type" content="text/html; charset=utf-8" />
<title>?????</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<style type="text/css">
body,ul,li { padding:0; margin:0}
ul,li { list-style:none}
.img-scroll { position:relative; margin:20px auto; width:440px;}
.img-scroll .prev,.img-scroll .next { position:absolute; display:block; width:50px; height:100px; background-color:#000;
top:0; color:#FFF; text-align:center; line-height:100px}
.img-scroll .prev { left:0}
.img-scroll .next { right:0}
.img-list { position:relative; width:320px; height:100px; margin-left:60px; overflow:hidden}
.img-list ul { width:9999px;}
.img-list li { float:left; display:inline; width:100px; margin-right:10px; height:100px; background-color:#BDBDDF; text-align:center; line-height:100px;}
</style>
</head>

<body>
<div class="img-scroll">
<span class="prev">prev</span>
<span class="next">next</span>
<div class="img-list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<script type="text/javascript">
function DY_scroll(wraper,prev,next,img,speed,or)
{
var wraper = $(wraper);
var prev = $(prev);
var next = $(next);
var img = $(img).find('ul');
var w = img.find('li').outerWidth(true);
var s = speed;
next.click(function()
{
img.animate({'margin-left':-w},function()
{
img.find('li').eq(0).appendTo(img);
img.css({'margin-left':0});
});
});
prev.click(function()
{
img.find('li:last').prependTo(img);
img.css({'margin-left':-w});
img.animate({'margin-left':0});
});
if (or == true)
{
ad = setInterval(function() { next.click();},s*1000);
wraper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() { next.click();},s*1000);});

}
}
DY_scroll('.img-scroll','.prev','.next','.img-list',3,false);
</script>

</body>
</html>

赞 (0)

相关推荐

  • 原生js实现淘宝首页点击按钮缓慢回到顶部效果

    原生js实现淘宝首页点击按钮缓慢回到顶部效果

    淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字.点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件.鼠标移进移出按钮,按钮表现发生变化,所以需要给按钮添加mouseover, mouseout事件.要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件.我们将事件处理程序封装成三个函数moveIn, moveOut, goTop; 下面先给出html/css代

  • js控制当再次点击按钮时的间隔时间

    复制代码 代码如下: <script type="text/javascript" language="javascript"> var wait = 60; function change() { $o = $("#J_refresh_checkcode"); if(wait == 0) { $o.removeAttr("disabled"); $o.html("看不清?换一张"); wait

  • JS返回上一页实例代码通过图片和按钮分别实现

    1. <a href ="javascript:history.go(-1);">向上一页</a> 2. <a href="javascript :history.back(-1)">返回上一页</a> 3. 如果是用按钮做的话就是: 复制代码 代码如下: <input type="button" name="Submit" onclick="javascript

  • Extjs grid添加一个图片状态或者按钮的方法

    extjs的grid中我们经常需要添加一个图片状态或者按钮,总结一下自己用过的方法: 一.状态表示: 复制代码 代码如下: renderer:function(value){ if(value==0){ return "<img src='images/icons/cancel.png'>"; }else if(value==1){ return "<img src='images/icons/accept.png'>"; } return

  • js 获取input点选按钮的值的方法

    html: 复制代码 代码如下: <input type= "radio" name="isEnd" value='1'>是 <input type= "radio" name="isEnd" value='0' checked=checked>否 <script type="text/javascript"> var isEnd; function getRadioVa

  • Js实现手机发送验证码时按钮延迟操作

    实例代码记录: <script type="text/javascript"> function start_sms_button(obj){ var count = 1 ; var sum = 30; var i = setInterval(function(){ if(count > 10){ obj.attr('disabled',false); obj.val('发送验证码'); clearInterval(i); }else{ obj.val('剩余'+pa

  • 用js提交表单解决一个页面有多个提交按钮的问题

    用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本,然后再执行相应的动作,比较简单. <pre class="javascript" name="code">function check(txt){ $j("form").submit(function(){ if($txt=="提交"){ this.action="doAddMessage.action?button=提交"

  • 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控制按钮自动切换背景颜色,可暂停_我们 .grigg{ position:relative; font-family:Verdana; font-size:16px;color:#ffffff; } y=" "; function colourWrite(){ y=document.bgColor; if (document.layers) {x=document.FM.box.value} if (document.all) {x=document.all.kurt.innerH

  • js实现按钮加背景图片常用方法

    本文实例讲述了js实现按钮加背景图片常用方法.分享给大家供大家参考.具体实现方法如下: 方法一: 复制代码 代码如下: <input type="submit" onMouseOver="style=background:url('imgs/jb51.gif')"/> 方法二: 复制代码 代码如下: <input type="button" value="提交" style="background:

  • js控制再次点击按钮之间的间隔时间可防止重复提交

    <script type="text/javascript" language="javascript"> var wait = 60; function change() { $o = $("#J_refresh_checkcode"); if(wait == 0) { $o.removeAttr("disabled"); $o.html("看不清?换一张"); wait = 60; } el

  • JSP for循环中判断点击的是哪个按钮

    1.做留言板时,遇到数据库中for循环,判断点击的是哪个按钮的情况? 2.点击进入js方法 复制代码 代码如下: <script> function method(id){ alert(id); } </script> 复制代码 代码如下: <%for(User u:list){%> <input type="button" id=<%=u.getId() onclink="method('"<%=u.getId

  • JS实现的radio图片选择按钮效果

    JS实现的radio图片选择按钮效果

    用JS实现的radio图片选择按钮效果.注意:input后面的空格.用到的图片: 用JS实现的radio图片选择按钮效果-我们 .lanrentuku img{border:1px solid #008800;} function myFun(sId) { var oImg = document.getElementsByTagName('img'); for (var i = 0; i 用JS实现的radio图片选择按钮效果. 注意:input后面的空格. 查找更多代码,请访问:我们 [Ctr

随机推荐