这种js现在用的很多。同时网上的js代码页很多。我直接从网上当了一个来用;代码如下:

html

<div class="bannerbox">
                <div id="focus">
                    <ul>
                        <li><a href="#" target="_blank">
                            <img src="../images/index_18.gif" alt="" /></a></li>
                        <li><a href="#" target="_blank">
                            <img src="../images/index_18.gif" alt="" /></a></li>
                        <li><a href="#" target="_blank">
                            <img src="../images/index_18.gif" alt="" /></a></li>
                        <li><a href="#" target="_blank">
                            <img src="../images/index_18.gif" alt="" /></a></li>
                    </ul>
                </div>
            </div>

css:

.bannerbox { width: 970px; height: 447px; overflow: hidden; margin: 0px auto; }
#focus { border:none;width: 970px; height: 447px; clear: both; overflow: hidden; position: relative; float: left;z-index: 10 }
#focus ul { width: 970px; height: 447px; float: left; position: absolute; clear: both; padding: 0px; margin: 0px; border: none}
#focus ul li { float: left; width: 970px; height: 447px; overflow: hidden; position: relative; padding: 0px; margin:0;border: none }
#focus .preNext { width: 550px; height: 440px; position: absolute; top: 2px; cursor: pointer;border: none;}
#focus .pre { left: 0; background: url(../images/sprite.png) no-repeat left center;z-index: 20;border: none; }
#focus .next { right: 0; background: url(../images/sprite1.png) no-repeat right center;z-index: 20;border: none; }

jquery:

$(function () {
    var sWidth = $("#focus").width();
    var len = $("#focus ul li").length;
    var index = 0;
    var picTimer;
    var btn = "<div class='btnBg'></div><div class='btn'>";
    for (var i = 0; i < len; i++) {
        btn += "<span></span>";
    }
    btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
    $("#focus").append(btn);
    $("#focus .btnBg").css("opacity", 0);
    $("#focus .btn span").css("opacity", 0.4).mouseenter(function () {
        index = $("#focus .btn span").index(this);
        showPics(index);
    }).eq(0).trigger("mouseenter");
    $("#focus .preNext").css("opacity", 0.0).hover(function () {
        $(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
    }, function () {
        $(this).stop(true, false).animate({ "opacity": "0" }, 300);
    });
    $("#focus .pre").click(function () {
        index -= 1;
        if (index == -1) { index = len - 1; }
        showPics(index);
    });
    $("#focus .next").click(function () {
        index += 1;
        if (index == len) { index = 0; }
        showPics(index);
    });
    $("#focus ul").css("width", sWidth * (len));
    $("#focus").hover(function () {
        clearInterval(picTimer);
    }, function () {
        picTimer = setInterval(function () {
            showPics(index);
            index++;
            if (index == len) { index = 0; }
        }, 2800);
    }).trigger("mouseleave");
    function showPics(index) {
        var nowLeft = -index * sWidth;
        $("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300);
        $("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);
    }
});

以上代码经测试在ie9以上,ff,chroom下运行正常。代码参考懒人图库

jquery控制图片切换的更多相关文章

  1. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  2. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. Jquery实现图片切换效果(IE,FF,Goole)都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

  4. JS/JQuery控制图片宽度

    function changeImgWidth(){ for (i = 0; i <$('#info img').length; i++) { var imgWidth=$('#info img ...

  5. jquery实现图片切换

    <div> <img class="imgclick" src="img/pic1.png" /> </div> <s ...

  6. jquery 手机 图片切换 例子 网址

    http://m.swdhy.com/page/ShowCompany.aspx?cid=388481&name=山东潍坊金城服装有限公司

  7. 一款基于jQuery的图片分组切换焦点图插件

    这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...

  8. jquery 图片切换

    仿着写的一个jquery的图片切换小插件,代码如下: html: <!DOCTYPE html> <html lang="en"> <head> ...

  9. uwp 图片切换动画

    最近在学习安卓,LOL自定义战绩项目近乎停工,而且腾旭把界面全改了,好烦.刚好学习到安卓中的图片切换动画,我就想在LOL项目中实现一个.首先上百度查看一下,妈的,资料少的可怜. 还是自己来吧.自定义控 ...

随机推荐

  1. 基于fiddler的APP抓包及服务端模拟

    在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...

  2. Junit使用教程

    Junit是Java的单元测试工具,同时也是极限编程的好帮手.Junit4借助于Java5的Annotation(标注类)和静态导入的新特性,与Junit3有很大的区别,所以建议初学者直接使用Juni ...

  3. Web纯前端“旭日图”实现元素周期表

    一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...

  4. .NET MD5加密解密代码

    MD5简介: 是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式(就是把一个任意长度的字节串变换成一定长的大整数).不管是MD2.MD4还是MD5,它们都需要获 ...

  5. Contains Duplicate leetcode

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  6. 在.NET项目中使用PostSharp,使用MemoryCache实现缓存的处理(转)

    在之前一篇随笔<在.NET项目中使用PostSharp,实现AOP面向切面编程处理>介绍了PostSharp框架的使用,试用PostSharp能给我带来很多便利和优势,减少代码冗余,提高可 ...

  7. 2060: [Usaco2010 Nov]Visiting Cows 拜访奶牛

    2060: [Usaco2010 Nov]Visiting Cows 拜访奶牛 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 252  Solved: 1 ...

  8. 关于js中两种定时器的设置及清除(转载)

    1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...

  9. Linux shell-tail

    使用tail --help查看命令用于备忘 tail [  -f ] [  -c Number |  -n Number |  -m Number |  -b Number |  -k Number ...

  10. PHPCMS二次开发——对栏目可用 limit 限定获取

    为了实现类似用limit调用栏目,故自定义了mylimit(这里不能用limit,因为系统在解析的时候会覆盖,所以自定义的limit就起不到作用) 参数,例如: {pc:content  action ...