如何修改成小图片左右滚动

Question

本帖最后由 ssihcihc119 于 2014-11-13 14:43:29 编辑

Answer 1

<div class="ct4">
  <div class="w1000">
    <div id="imageShow" class="fl">
      <div class="scrollbg">
        <div class="scrollwrap"> <a id="left_img_btn" class="s_pre" href="javascript:void(0)"></a>
          <div style="top: 258px;" class="current" id="current"></div>
          <div class="outScroll_pic">
            <ul class="scroll_pic cls" id="small_pic">
              <li onclick="img.play(0)"><img src="images/1.jpg"></li>
              <li onclick="img.play(1)"><img src="images/2.jpg"></li>
              <li onclick="img.play(2)"><img src="images/3.jpg"></li>
              <li onclick="img.play(3)"><img src="images/4.jpg"></li>
              <li onclick="img.play(4)"><img src="images/5.jpg"></li>
              <li onclick="img.play(5)"><img src="images/6.jpg"></li>
              <li onclick="img.play(6)"><img src="images/7.jpg"></li>
            </ul>
          </div>
          <a id="right_img_btn" class="s_next" href="javascript:void(0)"></a> </div>
      </div>
      <ul class="imagebg" id="imagebg">
        <li style="display: block; opacity: 0;" class="bannerbg" data-spic="images/1.jpg" />
        <div class="bannerbg_main"><img src="images/1.jpg" /></div>
        <div class="valigh-fix"></div>
        </li>
        <li class="bannerbg" data-spic="images/2.jpg">
          <div class="bannerbg_main"><img src="images/2.jpg" /></div>
        </li>
        <li class="bannerbg" data-spic="images/3.jpg">
          <div class="bannerbg_main"><img src="images/3.jpg" /></div>
        </li>
        <li class="bannerbg" data-spic="images/4.jpg">
          <div class="bannerbg_main"><img src="images/4.jpg" /></div>
        </li>
        <li class="bannerbg" data-spic="images/5.jpg">
          <div class="bannerbg_main"><img src="images/5.jpg" /></div>
        </li>
        <li class="bannerbg" data-spic="images/6.jpg">
          <div class="bannerbg_main"><img src="images/6.jpg" /></div>
        </li>
        <li class="bannerbg" data-spic="images/7.jpg">
          <div class="bannerbg_main"><img src="images/7.jpg" /></div>
        </li>
      </ul>
    </div>
<script type="text/javascript" src="images/jquery.js"></script> 
<script type="text/javascript">
img.init();
img.play(0);
//阻止事件冒泡
function estop(e){
var e=arguments.callee.caller.arguments[0]||event;
if (e && e.stopPropagation){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;
}
}
</script> 
  </div>
</div>
*{ margin:0; padding:0;}
body { background: #fff; color: #000; font-size: 12px; height: auto; font-family:'\5B8B\4F53',Arial; line-height:1.5;}
.w1000 { width: 1000px; margin: 0 auto; position: relative;}
.ct4 { width: 100%; height: 648px; background: url("../images/ct4-img.jpg") center no-repeat; text-align: left;}
.ct4 #imageShow { width: 765px; height: 340px; margin: 183px 0 0 178px; overflow: hidden;}
.ct4 #imageShow .imagebg { position: relative; width: 484px; height: 282px; overflow: hidden; float: left; margin-top: 25px;}
.ct4 #imageShow .imagebg li { overflow: hidden; top: 0; left: 0; width: 484px;}
.ct4 #imageShow .scrollbg { width: 105px; float: right;}
.ct4 #imageShow .scrollbg .scrollwrap { width: 81px; margin: 0 auto; position: relative; height: 340px; right: 0;}
.ct4 #imageShow .scrollbg .scrollwrap .s_pre,.ct4 #imageShow .scrollbg .scrollwrap .s_next {display: block; height: 15px; position: absolute; width: 81px; }
.ct4 #imageShow .scrollbg .scrollwrap a.s_pre { background: url("../images/arrow_t.png") no-repeat scroll;  top: 4px;}
.ct4 #imageShow .scrollbg .scrollwrap a.s_next { background: url("../images/arrow_b.png") no-repeat scroll; bottom: 4px;}
.ct4 #imageShow .scrollbg .scrollwrap .outScroll_pic { width: 81px; overflow: hidden; position: relative; top: 29px; height: 280px;}
.ct4 #imageShow .scrollbg .scrollwrap .outScroll_pic li { float: left; width: 76px; height: 53px; overflow: hidden; margin: 2px 3px; cursor: pointer;}
.ct4 #imageShow .scrollbg .scrollwrap .outScroll_pic li img{ width: 76px;}
.ct4 #imageShow .scrollbg .scrollwrap .outScroll_pic .scroll_pic { position: absolute;}
.ct4 #imageShow .scrollbg .scrollwrap .current {background: url("../images/arrow_on.png") no-repeat scroll 0 50%; border: 2px solid #fab032; height: 50px; left: 1px; position: absolute; top: 0; width: 75px; z-index: 10; }
代码跟样式

Answer 2

没人回复我来自己结吧var img = {

 imageNum: 5,
 imageNumWidth:82,
 num:0,
 count:document.getElementById("imagebg").getElementsByTagName("li").length,
 
 current:document.getElementById("current"),
 imagebg:document.getElementById("imagebg"),
 imagebg_li:document.getElementById("imagebg").getElementsByTagName("li"),
 small_pic:document.getElementById("small_pic"),
 
 imageShow:document.getElementById("imageShow"),
 scrollbg:document.getElementById("scrollbg"),
 
 left_img_btn:document.getElementById("left_img_btn"),
 right_img_btn:document.getElementById("right_img_btn"),
 
 small_pic_html:[],
 
 animate:null,
 autoplay:null,
 
 init:function(){
  if ( img.imagebg_li.length > 5) { 
  img.imagebg.innerHTML = img.imagebg.innerHTML+img.imagebg.innerHTML+img.imagebg.innerHTML;
  } else {
  img.imagebg.innerHTML = img.imagebg.innerHTML;
  img.left_img_btn.style.display="none";
  img.right_img_btn.style.display="none";
  }
for(var i=0;i<img.imagebg_li.length;i++){
if(i!=0){
img.small_pic_html.push("<li onclick='img.play("+i+")'><img src='"+img.imagebg_li[i].getAttribute("data-sPic")+"' /></li>");
img.imagebg.getElementsByTagName("li")[i].style.display ="none";
}else{
img.small_pic_html.push("<li onclick='img.play("+i+")' class='currently'><img src='"+img.imagebg_li[i].getAttribute("data-sPic")+"' /></li>");
}
}
img.small_pic.innerHTML = img.small_pic_html.join("");
img.current.style.left = "0px";
img.small_pic.style.left = "0px";
img.imagebg_li[0].style.filter = "alpha(opacity=100)";
img.imagebg_li[0].style.opacity = 1;

img.left_img_btn.onclick = function(){img.play(img.num-1);}
img.right_img_btn.onclick = function(){img.play(img.num+1)};
if ( img.imagebg_li.length > 5) { 
//dsfadf
img.autoplay= setInterval(function(){img.play(img.num+1)},5000);
img.imageShow.onmouseover = function(){clearInterval(img.autoplay);}
img.imageShow.onmouseout = function(){img.autoplay= setInterval(function(){img.play(img.num+1)},5000); }
} else {
img.autoplay= null;
}
},

play:function(i){
var small_pic_left = parseInt(img.small_pic.style.left);
var current_left = parseInt(img.current.style.left);
var op = 0;
if(i == img.num|| img.animate!=null || i>img.count*3 || i<-1){return;}
for(var x=0;x<img.imagebg_li.length;x++){
img.small_pic.getElementsByTagName("li")[x].className = "";
img.imagebg_li[x].style.filter = "alpha(opacity="+op*10+")";
img.imagebg_li[x].style.opacity = op/10;
img.imagebg_li[x].style.display = "none";
}
if(i>(img.count*3-1)){
i-=img.count;
img.num -=img.count;
img.small_pic.style.left = small_pic_left + img.imageNumWidth*(i-img.count) +"px" ;
img.small_pic.getElementsByTagName("li")[i].className="currently";
small_pic_left = parseInt(img.small_pic.style.left);
current_left = parseInt(img.current.style.left);
}else if(i<0){
i+=img.count;
img.num +=img.count;
img.small_pic.style.left = small_pic_left - img.imageNumWidth*img.count +"px" ;
img.small_pic.getElementsByTagName("li")[i].className="currently";
small_pic_left = parseInt(img.small_pic.style.left);
current_left = parseInt(img.current.style.left);
}
if(i>img.num){
//如果比当前大;
img.imagebg_li[i].style.display = "block";
if(parseInt(img.current.style.left)>287){
//如果活动框到了最右边--完成
//小图片向左
img.animate = setInterval(function(){
if(parseInt(img.small_pic.style.left)>(small_pic_left- img.imageNumWidth*(i-img.num)+img.imageNumWidth*(i-img.num)/10)){
img.small_pic.style.left = parseInt(img.small_pic.style.left) - img.imageNumWidth*(i-img.num)/10 +"px" ;
img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")";
img.imagebg_li[i].style.opacity = op/9;
}else{
img.small_pic.style.left = small_pic_left - img.imageNumWidth*(i-img.num) +"px" ;
img.small_pic.getElementsByTagName("li")[i].className="currently";
clearInterval(img.animate);
img.num = i;
img.animate = null;
}
},30);
}else{
//活动框向右--完成
img.animate = setInterval(function(){
if(parseInt(img.current.style.left)<(current_left + img.imageNumWidth*(i-img.num)-img.imageNumWidth*(i-img.num)/10)){
img.current.style.left = parseInt(img.current.style.left) + img.imageNumWidth*(i-img.num)/10 +"px" ;
//为了IE联盟
img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")"; //"alpha(opacity=100)";
//为了火狐部落
img.imagebg_li[i].style.opacity = op/9;
}else{
img.current.style.left = current_left + img.imageNumWidth*(i-img.num) +"px" ;
img.small_pic.getElementsByTagName("li")[i].className="currently";
clearInterval(img.animate);
img.num = i;
img.animate = null;
}
},30);
}
}else if(i<img.num){
img.imagebg_li[i].style.display = "block";
//如果比当前小;
if(parseInt(img.current.style.left)<31){
//如果活动框到了最左边
//小图片向右
img.animate = setInterval(function(){
//console.log(small_pic_left+"+"+ img.imageNumWidth*(img.num-i))
if(parseInt(img.small_pic.style.left)<(small_pic_left- img.imageNumWidth*(i-img.num)+img.imageNumWidth*(i-img.num)/10)){
img.small_pic.style.left = parseInt(img.small_pic.style.left) - img.imageNumWidth*(i-img.num)/10 +"px" ;
img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")";
img.imagebg_li[i].style.opacity = op/9;
}else{
img.small_pic.style.left = small_pic_left - img.imageNumWidth*(i-img.num) +"px" ;
img.small_pic.getElementsByTagName("li")[i].className="currently";
clearInterval(img.animate);
img.num = i;
img.animate = null;
}
},30);
}else{
//活动框向左
img.animate = setInterval(function(){
if(parseInt(img.current.style.left)>(current_left - img.imageNumWidth*(img.num-i)+img.imageNumWidth*(img.num-i)/10)){
img.current.style.left = parseInt(img.current.style.left) - img.imageNumWidth*(img.num-i)/10 +"px" ;
img.imagebg_li[i].style.filter = "alpha(opacity="+(++op)*11+")";
img.imagebg_li[i].style.opacity = op/9;
}else{
img.current.style.left = current_left - img.imageNumWidth*(img.num-i) +"px" ;
img.small_pic.getElementsByTagName("li")[i].className="currently";
clearInterval(img.animate);
img.num = i;
img.animate = null;
}
},30);
}
}
}
}
*{margin:0;padding:0}body{background:#fff;color:#000;font-size:12px;height:auto;font-family:'\5B8B\4F53',Arial;line-height:1.5}.w1000{width:1000px;margin:0 auto;position:relative}.ct4{width:100%;background:url("../images/ct4-img.jpg")center no-repeat;text-align:left}.ct4#imageShow{width:765px;height:640px;margin:0 0 0 178px;overflow:hidden}.ct4#imageShow.imagebg{position:relative;width:484px;height:282px;overflow:hidden;float:left;margin-top:25px}.ct4#imageShow.imagebg li{overflow:hidden;top:0;left:0;width:484px}.ct4#imageShow.scrollbg{width:410px;float:right;margin-right:20px}.ct4#imageShow.scrollbg.scrollwrap{width:410px;margin:0 auto;position:relative;height:150px;right:0}.ct4#imageShow.scrollbg.scrollwrap.s_pre,.ct4#imageShow.scrollbg.scrollwrap.s_next{display:block;height:81px;position:absolute;width:15px;z-index:999}.ct4#imageShow.scrollbg.scrollwrap a.s_pre{background:url("../images/arrow_b.png")no-repeat scroll;top:4px;left:-15px}.ct4#imageShow.scrollbg.scrollwrap a.s_next{background:url("../images/arrow_t.png")no-repeat scroll;top:4px;right:-15px}.ct4#imageShow.scrollbg.scrollwrap.outScroll_pic{width:410px;overflow:hidden;position:relative;height:57px}.ct4#imageShow.scrollbg.scrollwrap.outScroll_pic li{float:left;width:76px;height:53px;overflow:hidden;margin:2px 3px;cursor:pointer}.ct4#imageShow.scrollbg.scrollwrap.outScroll_pic li img{width:76px}.ct4#imageShow.scrollbg.scrollwrap.outScroll_pic.scroll_pic{position:absolute}.ct4#imageShow.scrollbg.scrollwrap.current{background:url("../images/arrow_on.png")no-repeat scroll 0 50%;border:2px solid#fab032;height:50px;position:absolute;top:0;width:75px;z-index:10}
<div class="ct4"><div class="w1000"><div id="imageShow"class="fl"><ul class="imagebg"id="imagebg"><li style="display: block; opacity: 0;"class="bannerbg"data-spic="images/1.jpg"/><div class="bannerbg_main"><img src="images/1.jpg"/></div><div class="valigh-fix"></div></li><li class="bannerbg"data-spic="images/2.jpg"><div class="bannerbg_main"><img src="images/2.jpg"/></div></li><li class="bannerbg"data-spic="images/3.jpg"><div class="bannerbg_main"><img src="images/3.jpg"/></div></li><li class="bannerbg"data-spic="images/4.jpg"><div class="bannerbg_main"><img src="images/4.jpg"/></div></li><li class="bannerbg"data-spic="images/5.jpg"><div class="bannerbg_main"><img src="images/5.jpg"/></div></li><li class="bannerbg"data-spic="images/6.jpg"><div class="bannerbg_main"><img src="images/6.jpg"/></div></li><li class="bannerbg"data-spic="images/7.jpg"><div class="bannerbg_main"><img src="images/7.jpg"/></div></li></ul><div class="scrollbg"><div class="scrollwrap"><a id="left_img_btn"class="s_pre"href="javascript:void(0)"></a><div class="current"id="current"></div><div class="outScroll_pic"><ul class="scroll_pic cls"id="small_pic"><li onclick="img.play(0)"><img src="images/1.jpg"></li><li onclick="img.play(1)"><img src="images/2.jpg"></li><li onclick="img.play(2)"><img src="images/3.jpg"></li><li onclick="img.play(3)"><img src="images/4.jpg"></li><li onclick="img.play(4)"><img src="images/5.jpg"></li><li onclick="img.play(5)"><img src="images/6.jpg"></li><li onclick="img.play(6)"><img src="images/7.jpg"></li></ul></div><a id="right_img_btn"class="s_next"href="javascript:void(0)"></a></div></div></div><script type="text/javascript"src="images/jquery.js"></script><script type="text/javascript">img.init();img.play(0);function estop(e){var e=arguments.callee.caller.arguments[0]||event;if(e&&e.stopPropagation){e.stopPropagation()}else{window.event.cancelBubble=true;return false}}</script></div></div>