欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jquery编程开发如何实现图片轮换

程序员文章站 2022-06-02 14:16:02
网站首页没有一点动画怎么可以,我以前用过flash as3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦。一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实...

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

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

页面+js代码

代码如下:


<script type="text/javascript">
        var piccurrent = 1;
        var pictotal = 8;
        var interval; //自动运行
        function picchange(current) {
            //停止当前动画
            if ($("#pimg").is(":animated")) { $("#pimg").stop(); }
            piccurrent = current;
            //为当前选择的设置样式
            $("#plink").find("a").removeclass("picselect")
            $("#plink").find("a[title='" + piccurrent + "']").addclass("picselect");
            //设置下面的图片说明
            var remark = "<a href=\"images/pic" + piccurrent + ".jpg\">";
            switch (piccurrent) {
                case 1: remark += " 菊花〔拉丁学名:dendranthema morifolium(ramat. )tzvel.〕,常用chrysanthemum。菊花是菊科,菊属多年生草本... "; break;
                default: remark += piccurrent + "测试说明"; break;
            }
            remark += "</a>";
            $("#picremark").html(remark);
            //运行动画
            $("#pimg").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" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>图片切换</title>
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
    <link href="picchange.css" rel="stylesheet" type="text/css" />
    </head>
<body>
    <p class="picmain">
        <p class="picimg" id="pimg">
            <img src="images/pic1.jpg" class="pic" />
            <img src="images/pic2.jpg" class="pic" />
            <img src="images/pic3.jpg" class="pic" />
            <img src="images/pic4.jpg" class="pic" />
            <img src="images/pic5.jpg" class="pic" />
            <img src="images/pic6.jpg" class="pic" />
            <img src="images/pic7.jpg" class="pic" />
            <img src="images/pic8.jpg" class="pic" />
        </p>
        <p class="picaction" id="plink">
            <a href="images/pic8.jpg" title="8" onclick=" return picchange(8)" class="">8</a> <a href="images/pic7.jpg" title="7" onclick=" return picchange(7)">7</a> <a href="images/pic6.jpg" title="6"
                    onclick=" return picchange(6)">6</a> <a href="images/pic5.jpg" title="5" onclick=" return picchange(5)">
                        5</a> <a href="images/pic4.jpg" title="4" onclick=" return picchange(4)">4</a>
            <a href="images/pic3.jpg" title="3" onclick=" return picchange(3)">3</a> <a href="images/pic2.jpg"
                title="2" onclick=" return picchange(2)">2</a> <a href="images/pic1.jpg" title="1"
                    onclick=" return picchange(1)" class="">1</a>
        </p>
        <p id="picremark" class="picremark">
            测试介绍文件了啊</p>
    </p>
</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;
}