图片轮播

[懒猫猫IT]

类似这样的效果

<DIV class="leftbutton" id="leftarr" onclick="prev()"></DIV>
<DIV class="picbox" id="picbox">
                    <DIV id="pic1" class="box" onmouseover="showme(this.id)" onmouseout="hideme(this.id)">
                        <img src="img/2.jpg">
                        <div class="display_on">
                            <p class="f30 colorf">王鸿
                            <hr class="line1">
                            <p class="f24 colorf">中国科学院教授
                        </div>
                        <div class="display_off" id="dpic1">
                            <p class="f16 color3">王鸿
          
                        </div>
                    </DIV>

                    <DIV id="pic2" class="box" onmouseover="showme(this.id)" onmouseout="hideme(this.id)">
                        <img src="img/1.jpg">
                        <div class="display_on">
                            <p class="f30 colorf">王鸿
                            <hr class="line1">
                            <p class="f24 colorf">中国科学院教授
                        </div>
                        <div class="display_off" id="dpic2">
                            <p class="f16 color3">王鸿
                        </div>
                    </DIV>
</DIV>
<DIV class="rightbutton" id="rightarr" onclick="next()"></DIV>

布局代码如上，如何实现。
另外上面如果不写明id为pic1，onmouseover如何写脚本让下面子div,display_off为显示呢。

[zhangsheng_1992]

第二个问题我可以回答你 不用id可以用class取对象 不过取到的是一个对象列表 第一个就是0 第二个就是1以此类推

//js
var offclass = documnet.getElementsByClassName('display_off');
offclass[0].style.display="block";

//jquery
$(".display_off").eq(0).show();

[懒猫猫IT]

引用 1 楼 zhangsheng_1992 的回复:

第二个问题我可以回答你 不用id可以用class取对象 不过取到的是一个对象列表 第一个就是0 第二个就是1以此类推

//js
var offclass = documnet.getElementsByClassName('display_off');
offclass[0].style.display="block";

//jquery
$(".display_off").eq(0).show();

如何确定是0显示还是1显示呢。这个还是和第一个大的box有关的，要关联起来。如果box没有Id，display_off也没有id，如何能够关联起来这两个呢。

[辣姐什么鬼]

http://blog.csdn.net/liona_koukou/article/details/69950231 这是今天写了一个无缝滚动的例子，你可以把你的带进去试试

[懒猫猫IT]

引用 6 楼 liona_koukou 的回复:

http://blog.csdn.net/liona_koukou/article/details/69950231 这是今天写了一个无缝滚动的例子，你可以把你的带进去试试

试了下好像不行，可以看看我的样式帮我加一下JS吗？

[辣姐什么鬼]

想用jquery写还是js原生写？

[懒猫猫IT]

引用 3 楼 liona_koukou 的回复:

想用jquery写还是js原生写？

都可以的。布局代码已经改了，2个按钮和图片框放在了一个div里面，使用了display：inline-block让它们居中了。可以根据这个样式写一个demo吗？

<DIV class="picbox" id="picbox">
                    <DIV class="leftbutton" id="leftarr" onclick="prev()"></DIV>
                    <DIV id="pic1" class="box" onmouseover="showme(this.id)" onmouseout="hideme(this.id)">
                        <img src="img/2.jpg">
                        <div class="display_on">
                            <p class="f30 colorf">王鸿
                            <hr class="line1">
                            <p class="f24 colorf">中国科学院教授
                        </div>
                        <div class="display_off" id="dpic1">
                            <p class="f16 color3">王鸿
           
                        </div>
                    </DIV>
 
                    <DIV id="pic2" class="box" onmouseover="showme(this.id)" onmouseout="hideme(this.id)">
                        <img src="img/1.jpg">
                        <div class="display_on">
                            <p class="f30 colorf">王鸿
                            <hr class="line1">
                            <p class="f24 colorf">中国科学院教授
                        </div>
                        <div class="display_off" id="dpic2">
                            <p class="f16 color3">王鸿
                        </div>
                    </DIV>
                    <DIV class="rightbutton" id="rightarr" onclick="next()"></DIV>
</DIV>

[辣姐什么鬼]

嗯，我下午有时间可以写一下