Jquery implements image rotation_jquery-JS Tutorial-php.cn

Jquery implements image rotation_jquery

WBOY

Release： 2016-05-16 16:17:39

Original

1404 people have browsed it

How can the homepage of the website not have any animation? I have used Flash As3 to switch pictures before, and the effect is very good, but it is troublesome and difficult to change. I have always wanted to make a picture switching effect myself, but I always thought it would be troublesome. I tried it out today and found that it is actually relatively simple. However, there is a small problem. In the incompatible mode of IE8, the style addition of a div with a transparent effect fails. However, I used Google and the IE8 compatibility test was ok.

Anyway, I recorded it for myself, so I won’t say much more. The js is not separated from the page, and no plug-ins are made. A website cannot have a few of these effects, so let’s implement them first. The final effect is still very impressive.

Page JS code

Copy code The code is as follows:

复制代码代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

    图片切换

            8 7                     onclick=" return picChange(6)">6
                        5 4
            3                 title="2" onclick=" return picChange(2)">2                     onclick=" return picChange(1)" class="">1

测试介绍文件了啊

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;

}

以上就是本文的全部内容了，实现的功能很实用，希望大家能够喜欢。