完美兼容各大浏览器的jQuery插件实现图片切换特效


文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦。。。

JS代码部分:

http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width">
    <title>图片切换</title>
    <script src="jquery-1.10.2.min.js"></script>
    <link href="zoeDylan.ImgChange.css" rel="stylesheet" />
    <script src="zoeDylan.ImgChange.js"></script>
    <script>
            var a_imgs = new Array(//插入图片地址
                './1 (1).jpg',
                './1 (2).jpg',
                './1 (3).jpg',
                './1 (4).jpg'
                ),
                a_links = new Array(//点击图片跳转的网址
                'www.baidu.com',
                'www.qq.com',
                'www.google.com',
                'www.zol.com'
                ),
                a_tips = new Array(//鼠标停靠的提示
                '百度',
                '腾讯',
                '谷歌',
                '中关村'
                );
            $(function () {
            $('#imgc').zoeDylan_ImageChange({//设置
                width: 500,
                height: 300,
                imgs: a_imgs,
                links: a_links,
                tips: a_tips,
                timers:2000
            });
            });
    </script>
</head>
<body>
    <div id="imgc">
<!--        <span class="zd-imgChange-change zd-imgChange-change-left"><</span>
        <div class="zd-imgChange-img">
            <img class="zd-imgChange-img-item" src="http://subject.9ria.com/html5game/images/t1f.jpg" alt="图片加载错误!" title="提示" />
        </div>
        <div class="zd-imgChange-controll"><span>d</></div>
        <span class="zd-imgChange-change zd-imgChange-change-right">></span>-->
    </div>
</body>
</html>

ps:尽量使用高版本浏览器,目测测试浏览器:IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行,IE6透明效果有损失

代码下载:http://xiazai.phpstudy.net/201412/yuanma/zeodylanimgchange(phpstudy.net).rar


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3