jquery 实现文字轮播滚动

效果如图;

html

<div class="search_2">
<div id="gundongAreaMain" style="position: absolute;top: 30px;left: 10px;">
<span><img src="../images/index/tishi_a.gif" alt="" style="margin-right: 10px"></span>
<span><img src="../images/index/kuohao1.png" alt=""></span>
<div id="gundong" style="display: inline-block;vertical-align: top;">
<div id="gundongAreaMain1" style="margin-top: 2px">
<ul id="gundongAreaMain2" style=" color: #1d6786;">
            <li>232323232323</li>
            <li>232323232323</li>
            <li>232323232323</li>

            <li>232323232323</li>
            <li>232323232323</li>
            <li>232323232323</li>


</ul>
<ul id="gundongAreaMain3"></ul>
</div>
</div>
<span><img src="../images/index/kuohao2.png" alt=""></span>
</div>

</div>

css:

.search_2{
height: 80px;
text-align: right;
position: relative;
min- 1100px;
border-bottom: 2px solid #eaeaea;
99%;
}
.search_2 span{
display: inline-block;
height:22px;
line-height: 22px;
color:#666;
}
.search_2 p{
margin-left: -40px;
}
.search_2 span i{
padding:0 12px 0 6px;
}
.search_2 input{
/*margin-top: 30px;*/
300px;
height:35px;
line-height: 35px;
border-radius: 4px;
padding-left: 10px;
color:#bbb;
border: 1px solid #999999;
/*margin-right: 20px;*/
}
.search_s{
margin-top: 30px;
/*border:1px solid red;*/
height: 36px;
320px;
position: relative;
float: right;
}
.search_2 button{
height:35px;
51px;
line-height: 35px;
color: #fff;
/**/
border-radius: 0 4px 4px 0;
padding:0 8px;
margin:4px 0 0 -36px;
cursor: pointer;
background: #079cda url("../../images/index/seek.png") no-repeat center center;
position: absolute;
right: 0;
top:-4px;

}







原文地址:https://www.cnblogs.com/zou1234/p/7991741.html