首页 > 代码库 > Jquery 学习之路（四）高大上的图片轮换

Jquery 学习之路（四）高大上的图片轮换

2024-07-08 18:09:04   221人阅读

　　网站首页没有一点动画怎么可以，我以前用过Flash As3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下 设置有透明效果的div 样式添加失效了，但是我用谷歌，IE8兼容测试都ok。

　　反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效果还是很高大上的。

下载地址：http://files.cnblogs.com/xiaoshuai1992/PicChange.zip

页面+JS代码

<script type="text/javascript">        var picCurrent = 1;        var picTotal = 8;        var interval; //自动运行        function picChange(current) {            //停止当前动画            if ($("#divImg").is(":animated")) { $("#divImg").stop(); }            picCurrent = current;            //为当前选择的设置样式            $("#divLink").find("a").removeClass("picselect")            $("#divLink").find("a[title=‘" + picCurrent + "‘]").addClass("picselect");            //设置下面的图片说明            var remark = "<a href=http://www.mamicode.com/"images/pic" + picCurrent + ".jpg\">";            switch (picCurrent) {                case 1: remark += " 菊花〔拉丁学名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊属多年生草本... "; break;                default: remark += picCurrent + "测试说明"; break;            }            remark += "</a>";            $("#picremark").html(remark);            //运行动画            $("#divImg").animate({ left: -((picCurrent - 1) * 1000) + "px" }, "1000");            return false;        }        //暂不需使用        function PicPer() {            if (picCurrent > 1) {                picCurrent--;            }            else {                picCurrent = picTotal;            }            picChange(picCurrent);        }        //下一张        function PicNext() {            if (picCurrent == picTotal) {                picCurrent = 1            }            else {                picCurrent++;            }            picChange(picCurrent);        }        //自动切换图片        function PicRun(functionName) {            picChange(1);            interval = setInterval(PicNext, "3000");        }        $(document).ready(function () {            PicRun();        });    </script>

 

<!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>    <title>图片切换</title>    <script src="http://www.mamicode.com/jquery-1.8.0.js" type="text/javascript"></script>    <link href="http://www.mamicode.com/picchange.css" rel="stylesheet" type="text/css" />    </head><body>    <div class="picMain">        <div class="picimg" id="divImg">            <img src="http://www.mamicode.com/images/pic1.jpg" class="pic" />            <img src="http://www.mamicode.com/images/pic2.jpg" class="pic" />            <img src="http://www.mamicode.com/images/pic3.jpg" class="pic" />            <img src="http://www.mamicode.com/images/pic4.jpg" class="pic" />            <img src="http://www.mamicode.com/images/pic5.jpg" class="pic" />            <img src="http://www.mamicode.com/images/pic6.jpg" class="pic" />            <img src="http://www.mamicode.com/images/pic7.jpg" class="pic" />            <img src="http://www.mamicode.com/images/pic8.jpg" class="pic" />        </div>        <div class="picaction" id="divLink">            <a href="http://www.mamicode.com/images/pic8.jpg" title="8" onclick=" return picChange(8)" class="">8</a> <a href="http://www.mamicode.com/images/pic7.jpg"                title="7" onclick=" return picChange(7)">7</a> <a href="http://www.mamicode.com/images/pic6.jpg" title="6"                    onclick=" return picChange(6)">6</a> <a href="http://www.mamicode.com/images/pic5.jpg" title="5" onclick=" return picChange(5)">                        5</a> <a href="http://www.mamicode.com/images/pic4.jpg" title="4" onclick=" return picChange(4)">4</a>            <a href="http://www.mamicode.com/images/pic3.jpg" title="3" onclick=" return picChange(3)">3</a> <a href="http://www.mamicode.com/images/pic2.jpg"                title="2" onclick=" return picChange(2)">2</a> <a href="http://www.mamicode.com/images/pic1.jpg" title="1"                    onclick=" return picChange(1)" class="">1</a>        </div>        <div id="picremark" class="picRemark">            测试介绍文件了啊</div>    </div></body></html>

 css的实现

.picMain{    margin: auto;    overflow: hidden;    width: 1000px;    height: 400px;    position: relative;}.picimg{    width: 10000px;    height: 400px;    background-color: #000000;    position: absolute;    top: 0px;}.picRemark{    position: absolute;    width: 500px;    height: 50px;    bottom: 0px;    left: 0px;    color: #FFFFFF;    text-indent: 2em;}.picRemark a{    color: #FFFFFF;    text-decoration: none;}.picRemark a:hover{    text-decoration: underline;}.picaction{    position: absolute;    width: 1000px;    height: 50px;    background-color: #000000;    filter: alpha(opacity=50);    -moz-opacity: 0.5;    opacity: 0.5;    overflow: auto;    bottom: 0px;    left: 0px;    text-align: right;}.picaction a{    border: 1px solid #C0C0C0;    width: 30px;    height: 30px;    float: right;    line-height: 30px;    text-decoration: none;    text-align: center;    color: #FFFFFF;    font-weight: bold;    margin-top: 10px;    display: block;    margin-right: 10px;}.pic{    width: 1000px;    height: 400px;    float: left;}.picselect{    background-color: #919191;}

 


联系
我们