無(wú)限滾動(dòng)實(shí)現(xiàn)不了
html布局:
<div class="contact">
?<div class="contact-detail">
? ?<h3 class="sub-title">企業(yè)協(xié)作更高效</h3>
? ?<div id="contact-ways">
? ? ?<div class="contact-div">
? ? ? ?<span class="contact-span">
? ? ? ? ?<!--<span class="contact-radio"></span>-->
? ? ? ? ?管理碎片化商務(wù),避免信息分散
? ? ? ?</span>
? ? ?</div>
? ? ?<div class="contact-div">
? ? ? ?<span>
? ? ? ? ?<!--<span class="contact-radio"></span>-->
? ? ? ? ?連結(jié)商務(wù)鏈條,避免信息斷層
? ? ? ?</span>
? ? ?</div>
? ? ?<div class="contact-div">
? ? ? ?<span>
? ? ? ? ?<!--<span class="contact-radio"></span>-->
? ? ? ? ?實(shí)時(shí)內(nèi)容交互,提高協(xié)作效率
? ? ? ?</span>
? ? ?</div>
? ?</div>
?</div>
?<div id="wrap">
? ?<div id="carousel" style="left: 0;">
? ? ?<img src="../sprite/picture_1.png">
? ? ?<img src="../sprite/picture_02.png">
? ? ?<img src="../sprite/picture_04_04.png">
? ?</div>
? ?<a href="javascript:;" class="arrow" id="prev"></a>
? ?<a href="javascript:;" class="arrow" id="next"></a>
?</div>
</div>
css:
.contact {
?background-color: #f6f5f5;
?margin: 86px 0 86px 0;
?padding: 70px 0 86px 0;
}
.contact-detail {
?display: inline;
?width: 45%;
?text-align: center;
?margin-left: 0;
?margin-right: 170px;
?margin-top: 164px;
?float: left;
}
.contact-ways {
?margin: 0 auto;
}
.contact-div {
?padding: 10px 0 10px 210px;
?text-align: left
}
#wrap {
?width: 600px;
?min-height:400px;
?margin-right: 0;
?position: relative;
?overflow: hidden;//隱藏超出的內(nèi)容
}
#carousel {
?position: absolute;//定位圖片
?/*width: 1800px;*/
?min-height:400px;
?z-index: 1;
}
#carousel img {
?float: left;
?width: 600px;
?height: 400px;
}
.arrow {
?cursor: pointer;
?display: none;
?line-height: 39px;
?text-align: center;
?font-size: 36px;
?font-weight: bold;
?width: 40px;
?height: 40px;
?position: absolute;
?z-index: 2;
?top: 180px;
?background-color: rgba(0,0,0,.3);
?color: #fff;
}
.arrow:hover {
?background-color: rgba(0,0,0,.7);
}
#wrap:hover .arrow {
?display: block;
}
#prev {
?left: 20px;
}
#next {
?right: 20px;
}
.contact-span {
?color: red;
?font-size: 24px;
?line-height: 150%;
}
js:
<script>
?window.onload = function () {
? ?var wrap = document.getElementById('wrap');
? ?var carousel = document.getElementById('carousel');
? ?var spans = document.getElementById('contact-ways').getElementsByTagName('span');
? ?var prev = document.getElementById('prev');
? ?var next = document.getElementById('next');
? ?var index = 1;
? ?function showSpans () {
? ? ?for (var i = 0; i < spans.length; i ++) {
? ? ? ?if (spans[i].className == 'contact-span') {
? ? ? ? ?spans[i].className = '';
? ? ? ? ?break;
? ? ? ?}
? ? ?}
? ? ?spans[index - 1].className = 'contact-span'
? ?}
? ?function animate(offset) {
? ? ?var newLeft = parseInt(carousel.style.left) + offset;
? ? ?if(newLeft > 0) {
? ? ? ?newLeft = -1200 + 'px';
? ? ?}
? ? ?if(newLeft < -1200) {
? ? ? ?newLeft = 0;
? ? ?}
? ? ?carousel.style.left = newLeft + 'px';
? ?}
? ?next.onclick = function () {
? ? ?if (index == 3) {
? ? ? ?index = 1
? ? ?} else {
? ? ? ?index += 1;
? ? ?}
? ? ?showSpans();
? ? ?animate(-600);
? ?};
? ?prev.onclick= function () {
? ? ?if (index == 1) {
? ? ? ?index = 3
? ? ?} else {
? ? ? ?index -= 1;
? ? ?}
? ? ?showSpans();
? ? ?animate(600)
? ?};
?}
</script>
點(diǎn)擊next是可以無(wú)限滾動(dòng),但是點(diǎn)擊prev就不行,還請(qǐng)大神幫我看看問(wèn)題出在哪,我找了好多遍了,沒(méi)發(fā)現(xiàn)問(wèn)題。
2022-03-28
哈哈,我找到解決方法了,我的也是新版本的sdk,后來(lái)想想干嘛非要在MAINFEST中添加,直接在mainativity中添加就行啦
qhqstggvwadbahckpkwtatickpipqamzfprfbmhqzewxkudbtexrtygmlyxiavyeuqbrdsncrajmraocatufmyvkvlleteinqyzntbcnpx
2016-10-25
animate改成這樣應(yīng)該就好了吧。
2016-10-25
<div class="contact">
? ? <div class="contact-detail">
? ? ? <h3 class="sub-title">企業(yè)協(xié)作更高效</h3>
? ? ? <div id="contact-ways">
? ? ? ? <div class="contact-div">
? ? ? ? ? <span class="contact-span">
? ? ? ? ? ? <!--<span class="contact-radio"></span>-->
? ? ? ? ? ? 管理碎片化商務(wù),避免信息分散
? ? ? ? ? </span>
? ? ? ? </div>
? ? ? ? <div class="contact-div">
? ? ? ? ? <span>
? ? ? ? ? ? <!--<span class="contact-radio"></span>-->
? ? ? ? ? ? 連結(jié)商務(wù)鏈條,避免信息斷層
? ? ? ? ? </span>
? ? ? ? </div>
? ? ? ? <div class="contact-div">
? ? ? ? ? <span>
? ? ? ? ? ? <!--<span class="contact-radio"></span>-->
? ? ? ? ? ? 實(shí)時(shí)內(nèi)容交互,提高協(xié)作效率
? ? ? ? ? </span>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? ? <div id="wrap">
? ? ? <div id="carousel" style="left: 0;">
? ? ? ? <img src="../sprite/picture_1.png">
? ? ? ? <img src="../sprite/picture_02.png">
? ? ? ? <img src="../sprite/picture_04_04.png">
? ? ? </div>
? ? ? <a href="javascript:;" class="arrow" id="prev"></a>
? ? ? <a href="javascript:;" class="arrow" id="next"></a>
? ? </div>
? </div>
2016-10-24
你這代碼不完整啊,id為contact-ways的元素不存在,能補(bǔ)充完整么(^ω^)?