Jquery implements image rotation_jquery

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;
}

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