<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>jquery带按钮的图片切换效果</title>

<script type="text/javascript" src="jquery-1.8.0.js"></script>

<style type="text/css">

body,ul{ padding:0; margin:0;}

li{ list-style:none;}

.bg{ width:440px; position:relative; margin:20px auto;}

.bg .prev,.bg .next{ width:50px; height:100px; background:#000; color:#FFF; text-align:center; line-height:100px; position:absolute; top:0;}

.bg .prev{ left:0; cursor:pointer;}

.bg .next{ right:0; cursor:pointer;}

.bg .imgbg{ width:320px; height:100px; margin-left:60px; overflow:hidden;}

.bg .imgbg ul{ width:9999px;}

.bg .imgbg ul li{ width:100px; height:100px; float:left; margin-right:10px; background:#f00; line-height:100px; text-align:center;}

</style>

</head>

<body>

<div class="bg">

    <span class="prev">prev</span>

    <span class="next">next</span>

    <div class="imgbg">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

<div class="cl"></div>

</div>

<script type="text/javascript">

    function DY_scroll(bg,prev,next,imgbg,speed,auto){

        var bg = $(bg);

        var prev = $(prev);

        var next = $(next);

        var longdiv = $(imgbg).find('ul');

        var width = longdiv.find('li').outerWidth(true);

        var speed = speed;

        var auto = auto;

        //next按钮

        next.click(function(e) {

            longdiv.animate({marginLeft:-width},function(){

                longdiv.find('li').eq(0).appendTo(longdiv);

                longdiv.css('margin-left',0);

            });

        });

        //prev按钮

        prev.click(function(e) {

            longdiv.find('li:last').prependTo(longdiv);

            longdiv.css('margin-left',-width);

            longdiv.animate({marginLeft:0});

        });

        //自动播放与鼠标滑动停顿

        if(auto == true){

            ad = setInterval(function(){

                next.click();

            },speed*1000);

            bg.hover(function(e) {

                clearInterval(ad);

            },function(e){

                ad = setInterval(function(){

                    next.click();

                },speed*1000);

            });

        }

    }

    DY_scroll('.bg','.prev','.next','.imgbg',1,true);

</script>

</body>

</html>

不多说效果如下：以上代码就是完整的切换效果，也是最简单的原理，希望能够学习

jquery带按钮的图片切换效果的更多相关文章

  1. jQuery plugin : bgStretcher 背景图片切换效果插件

    转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...

  2. jQuery自动与手动图片切换效果下载

    效果图: 查看效果:http://hovertree.com/jq/hovertreeimg/ 下载:http://hovertree.com/h/bjaf/gk8mko69.htm 使用代码: &l ...

  3. js带缩略图的图片切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery带小图的图片轮换效果

    右边显示大图,左边显示小图 <style> ul{ list-style:none; padding:0px; margin:0px;} li{ list-style:none; padd ...

  5. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  6. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  7. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  8. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  9. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

随机推荐

  1. Scrollview总结：滑动问题、监听Scrollview实现头部局改变

    ScrollView就是一个可以滚动的View,这个滚动的方向是垂直方向的,而HorizontalScrollView则是一个水平方向的可以滚动的View. ScrollView的简单介绍 Scrol ...

  2. 牛客网 牛客小白月赛1 C.分元宵-快速幂

    C.分元宵   链接:https://www.nowcoder.com/acm/contest/85/C来源:牛客网 这个题就是快速幂,注意特判,一开始忘了特判,wa了一发. 代码: 1 #inclu ...

  3. Redis实用监控工具一览

    Redis已经成为web应用开发不可或缺的一个组成部分,在项目中的应用越来越广泛,这篇文章就来讲讲那些关于Redis监控的那点事. vredis-benchmark 1.1 简介 第一个就介绍一下,R ...

  4. BZOJ——2438: [中山市选2011]杀人游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=2438 Description 一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个 ...

  5. Oracle PL/SQL块 多表查询(emp员工表、dept部门表、salgrade工资等级表)

    范例: 查询每个员工的编号,姓名,职位,工资,工资等级,部门名称 ●确定要使用的数据表 |- emp表:员工的编号.姓名.职位.工资 |- salgrade表:工资等级 |- dept表:部门名称 ● ...

  6. Javao中使用Jackson反序列时，将LinkedHashMap转成对象的方法（将任何Object类型转成实体）

    可能存在这样一种情况,Jackson已经满足了大部分的序列化和反序列化工作,但是对于复杂的泛型实体估计未必能如愿的正常反序列,而此时对于一些泛型里面的实体对象就会反序列化成LinkedHashMap类 ...

  7. 支持WEB、Android、IOS的地图解决方案

    转自原文 支持WEB.Android.IOS的地图解决方案 工具链 GIS工具集 OpenGeo Suite 包含PostGIS, GeoServer, GeoWebCache, OpenLayers ...

  8. ArcGIS for Android地图控件的5大常见操作转

    http://blog.csdn.net/arcgis_mobile/article/details/7801467 GIS的开发中,什么时候都少不了地图操作.ArcGIS for Android中, ...

  9. IOS 教你玩转UITableViewController和TableView

    iphone和Ipad开发中UITableViewController和TableView应该是用得比較多得控件. 可是你是会由于写这些控件写得多了而厌烦. 全部怎么让这个控件一直能用.怎么让这个控件 ...

  10. 百科知识 scm文件如何打开

    用scplayer打开,目前有效的下载链接将是: http://download.csdn.net/download/kevingao/2686778