CSS+JS 幻灯片

最新推荐文章于 2024-06-12 22:40:10 发布

liu_zhongjie

最新推荐文章于 2024-06-12 22:40:10 发布

阅读量702

点赞数

分类专栏： JavaScript 文章标签： css function div microsoft class xhtml

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<title>SCA Ad Image Process</title>
<style type="text/css">
div#adBox{
width:437px;
padding:4px;
border:1px #D7D6D6 solid;
overflow:hidden;
}
div#adBox .imgBox{
height:316px;
width:437px;
}
div#adBox #control{
width:437px;
height:12px;
overflow:hidden;
}
div#adBox #control div{
width:12px;
height:12px;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
line-height:13px;
text-indent:1px;
color:#eeeeee;
text-align:center;
float:right;
margin-left:1px;
cursor:pointer;
background:#666666;}

/*滚动图片*/
#focus{
border: #D7D6D6 1px solid;
margin-top: 10px;
padding:5px;
width:435px;
position: relative;
height: 58px
}
#description{
width:392px;/*=78*5+10*2 */
height:58px;
overflow:hidden;
margin:0px 10px;
float:left;
}
.dis{float:left;width:11px;}
#description ul, #description li {float:left;margin: 0;padding: 0;height:58px;}
#description li img {margin-right:4px;padding:1px;border:#D7D6D6 1px solid;}
</style>
<script type="text/javascript">
var obj=document.getElementById;
var currentAd=0;
var adTimer;
var baseurl="http://www.xmarea.com/webtest/testPic/";//广告图片的根目录
var adDelay=5000;//广告切换时间
var controlItemId="controlitem";//根据自己的页面为跟踪条取ID前缀
var mapcolor="#ff0000";//Ad跟踪条颜色，建议与信息栏的a:hover一样
var imglink=new Array();
imglink[0]=new Array("1.jpg","#")
imglink[1]=new Array("2.jpg","#")
imglink[2]=new Array("3.jpg","#")
imglink[3]=new Array("4.jpg","#")
imglink[4]=new Array("5.jpg","#")
imglink[5]=new Array("6.jpg","#")
imglink[6]=new Array("1.jpg","#")
imglink[7]=new Array("2.jpg","#")
imglink[8]=new Array("3.jpg","#")
imglink[9]=new Array("4.jpg","#")
var smallImg=new Array();
smallImg[0]=new Array("s_1.jpg")
smallImg[1]=new Array("s_2.jpg")
smallImg[2]=new Array("s_3.jpg")
smallImg[3]=new Array("s_4.jpg")
smallImg[4]=new Array("s_5.jpg")
smallImg[5]=new Array("s_6.jpg")
smallImg[6]=new Array("s_1.jpg")
smallImg[7]=new Array("s_2.jpg")
smallImg[8]=new Array("s_3.jpg")
smallImg[9]=new Array("s_4.jpg")
</script>
</head>
<body>
<div id="adBox">
<div class="imgBox"><img src="images/pro_imgs/1.jpg" style="filter: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=1,motion=forward);" id="show" alt="" /></div>
</div>

   <div id=focus>
      <div class="dis"><img src="http://www.xmarea.com/webtest/testPic/left_scrool.jpg" alt="left" name="img_l" id="img_l" onClick="doSlide(-1)" /></div>
      <div id=description>
        <div id="content0" style="height:58px;width:900px">
        <ul id="content" class=content>
        </ul>
    </div>
      </div>
      <div class="dis"><img src="http://www.xmarea.com/webtest/testPic/right_scrool.jpg" alt="right" id="img_r" onClick="doSlide(1)" /></div>
</div>
<script>
//幻灯片效果
var navigatorName = "Microsoft Internet Explorer";
var isIE = false;
if(navigator.appName==navigatorName) isIE = true;
for(i=0;i<imglink.length;i++){
var itemBox=document.createElement('ul');
itemBox.innerHTML="<li id='"+controlItemId+i+"'><a href='#'><img src='"+baseurl+smallImg[i]+"'/></a></li>";
document.getElementById("content").appendChild(itemBox);}
var controlItem=document.getElementById("content").getElementsByTagName("li");
var controlItem_2=document.getElementById("content").getElementsByTagName("img");
function changeImg(){
   if(isIE) document.getElementById("show").filters[0].apply();
   document.getElementById("show").src=baseurl+imglink[currentAd][0];
   if(isIE) document.getElementById("show").filters[0].play();
   for(i=0;i<controlItem.length;i++){
      controlItem_2[i].style.borderColor=(i==currentAd)?mapcolor:"#D7D6D6";
    }
    if(currentAd==5){doSlide(1)}
    if(currentAd==9){doSlide(-1)}
   currentAd++;
   currentAd=(currentAd==imglink.length)?0:currentAd;
   adTimer=setTimeout("changeImg()",adDelay);}
   changeImg();
for(i=0;i<controlItem.length;i++){
   controlItem[i].οnclick=function(){
      clearTimeout(adTimer);
      currentAd=parseInt(this.id.substring(this.id.length-1,this.id.length));
    changeImg();};
}

//滚动效果
var ok_obj=document.getElementById("content").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/5)-1
var ele=document.getElementById("description");
var w=ele.clientWidth;
var n=20,t=50;
var timers=new Array(n);
var k=0;doSlide(0);
function doSlide(s){
if (k>=ok &&s>0|| k<=0 &&s<0)
//alert("已经到头了");
     return;
else{
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;
//            alert(x)
            timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
        }
    )();
}}
</script>
</body>
</html>

liu_zhongjie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+JS 幻灯片

SCA Ad Image Processdiv#adBox{width:437px;padding:4px;border:1px #D7D6D6 solid;overflow:hidden;}div#adBox .imgBox{height:316px;width:437px;}div#adBox #control{width:437px;height:12px;ove
复制链接

扫一扫