欢迎来到亿搜云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

javascript 可控图片滚动

       幻灯片和轮播图     2016-02-16     eycms     114     0    

<p><style type="text/css">

body{

  padding: 0px;

  margin: 0px;

  font: 70% verdana, geneva, arial, helvetica, sans-serif;

  color: #000;

  text-align: center

  }

#outer{

  padding: 0px;

  margin: 0px;

  width: 400px;

  text-align: center

  }

#focus{

  border: #ccc 2px solid;

  margin: 0px;

  padding: 0px;

  padding-top: 15px;

  background: url(/images/tile.gif) #fff repeat-y left top;

  width:540px;

  position: relative;

  height: 120px

  }

#description{

  height:120px;

  overflow:hidden;

  margin-right:0px;

float:left;

  }

.dis{

float:left;

width:40px;

text-align: center;

padding-top:30px

}

#description ul, #description li {

float:left;

display: inline;

margin: 0;

padding: 0;

height:150px

}

.content a:active,

.content a:visited,

.content a:link {

display: inline;

text-decoration: none;

}

.content a:hover {

color: #ffffff;

display: inline;

text-decoration: none;

}

img {border:0px}</style></p>

<div id="outer">

<div id="focus">

<div class="dis"><img id="img_l" alt="向左滚动" src="http://www.sxx.com/images/test/hupogundong/home4_r8_c2.gif" onclick="doSlide(-1)" /></div>

<div class="description" id="description">

<div id="content0">

<ul class="content" id="content">

    <li><a href="#"><img src="http://www.sxx.com/images/test/hupogundong/199417.jpg" alt="" /></a></li>

    <li><a href="#"><img src="http://www.sxx.com/images/test/hupogundong/199417.jpg" alt="" /></a></li>

    <li><a href="#"><img src="http://www.sxx.com/images/test/hupogundong/199417.jpg" alt="" /></a></li>

    <li><a href="#"><img src="http://www.sxx.com/images/test/hupogundong/199417.jpg" alt="" /></a></li>

    <li><a href="#"><img src="http://www.sxx.com/images/test/hupogundong/199417.jpg" alt="" /></a></li>

    <li><a href="#"><img src="http://www.sxx.com/images/test/hupogundong/199417.jpg" alt="" /></a></li>

</ul>

</div>

</div>

<div class="dis"><img id="img_r" alt="向右滚动" src="http://www.sxx.com/images/test/hupogundong/home4_r9_c12.gif" onclick="doSlide(1)" /></div>

</div>

</div>

<script>

var img_pad=5//图片间隔

var img_w=141//图片宽

var img_n=3//每窗图片数

document.write ("<style>.content a {padding: 0 "+ img_pad+" 0 "+ img_pad+";}</style>")

var win_w=img_w*img_n+(img_pad*3)*(img_n-1)

document.getElementById("description").style.width=win_w

var ok_add=document.getElementById("content0").getElementsByTagName("LI").length

document.getElementById("content0").innerHTML+=document.getElementById("content0").innerHTML

var ok_obj=document.getElementById("content0").getElementsByTagName("LI")

var ok=Math.ceil(ok_obj.length/3)-1;

document.getElementById("content0").style.width=(ok+1)*win_w

  var ele=document.getElementById("description");

  var w=ele.clientWidth;

  var n=20,t=50;

  var timers=new Array(n);

  var k=0;doSlide(0);

var ss=1,t2,t0

var add_1= (ok_add%2==0)?0:1

var add_2= (ok_add%2==0)?1:0

function doSlide(s){

ss=s;

  if (k>=ok-add_1 &&s>0){ele.scrollLeft=w;k=1;}

  if (k<=1-add_2 &&s<0){ele.scrollLeft=(ok-1)*w;k=ok-1}

  k+=s;

    var x=ele.scrollLeft

    var d=k*w-x;

    for(var i=0;i<n;i++){(

    function(){

    if(timers[i]) clearTimeout(timers[i]);

    var j=i;

    timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);

    }

    )()};

}

</script>


--结束END--

本文链接: http://eycms.cn/resources/slide/1110.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“亿搜云”
"亿搜云平台前端开发教学"
每日干货技术分享
 

×

成为 亿搜云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

亿搜云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 40819446

客服电话: 15250286283

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

亿搜云平台手机端