js代码：
<script type="text/javascript" src="/OrchardLocal/Media/Default/vrscienceandtechnology/move-1.js"></script>
<script>
window.onload = function(){
var oUl = document.getElementById('vrscienceandtechnology_big_RollImg_ul');
var aLiUl = oUl.getElementsByTagName('li');
var oOl = document.getElementsByTagName('Ol')[0];
var aLiOl = oOl.getElementsByTagName('li');
var oneWidth = aLiUl[0].offsetWidth;
var iNow = 0;
// var bBtn = true;
var oBox = document.getElementById('box');
var times = null;
var iNow2 = 0;
for(var i=0;i<aLiUl.length;i++){
if(i>0){
aLiUl[i].style.left = i*oneWidth + 'px';
}else{
aLiUl[i].style.left = 0;
}
}
for(var i=0;i<aLiOl.length;i++){
aLiOl[i].index = i;
aLiOl[i].onmouseover = function(){
// if(bBtn){
// bBtn = false;
for(var i=0;i<aLiOl.length;i++){
aLiOl[i].className = '';
}
this.className = 'active';
iNow = this.index;
iNow2 = this.index;
startMove(oUl,{left:- this.index*oneWidth},function(){
// bBtn = true;
});
// }
};
}
times = setInterval(toRun,3000);
oBox.onmouseover = function(){
clearInterval(times);
};
oBox.onmouseout = function(){
times = setInterval(toRun,3000);
};
function toRun(){
if(iNow == 0){
aLiUl[0].style.position='static';
oUl.style.left=0;
iNow2=0;
}
if(iNow == aLiOl.length-1){
iNow = 0;
aLiUl[0].style.position='relative';
aLiUl[0].style.left=aLiUl.length*oneWidth+'px';
}else{
iNow++;
}
iNow2++;
for(var i=0;i<aLiOl.length;i++){
aLiOl[i].className = '';
}
startMove(oUl,{left:-iNow2*oneWidth});
aLiOl[iNow].className = 'active';
};
};
</script>
move-1.js文件:
// JavaScript Document
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function getByClass(oParent,sClass)
{
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var re=new RegExp('\b'+sClass+'\b', 'i');
for(var i=0; i<aEle.length;i++)
{
if(aEle[i].className.search(re)!=-1)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
//远动框架startMove(对象, {'width':100,'height':100}, 执行后的再调用的函数) --->更新2013.3-21
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了——所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
css样式：
body,ul,ol{
margin:0;
padding:0;
}
li{
list-style:none;
}
img{
border:none;
vertical-align:top;
}
#box{
1365px;
height:476px;
position:relative;
margin:30px auto;
overflow:hidden;
}
.vrscienceandtechnology_big_RollImg_ul{
1365px;
position:absolute;
left:0;
top:0;
z-index:1;
}
.vrscienceandtechnology_big_RollImg_li{
1365px;
position:absolute;
top:0;
}
ol{
z-index:2;
120px;
position:relative;
right:10px;
bottom:10px;
margin-left:10px;
}
ol li{
margin-top:460px;
20px;
height:20px;
float:left;
display:inline;
background:#fff;
color:#f60;
line-height:20px;
text-align:center;
}
ol .active{
background:#f60;
color:#fff;
}
.vrscienceandtechnology_big_RollImg_left{
35%;
height:100%;
float:left;
padding-top:80px;
padding-right:10%;
font-family:'华文细黑';
text-align:justify;
text-justify:inter-ideograph;
}
.vrscienceandtechnology_big_RollImg_left_text1{
font-size:30px;
color:#222222;
}
.vrscienceandtechnology_big_RollImg_right{
53%;
height:100%;
float:left;
}
.vrscienceandtechnology_big_RollImg_left_text2{
font-size:18px;
color:#666666;
line-height:180%;
}
html代码：
<div id="box">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
<ul class="vrscienceandtechnology_big_RollImg_ul" id="vrscienceandtechnology_big_RollImg_ul">
<li class="vrscienceandtechnology_big_RollImg_li" >
<div class="vrscienceandtechnology_big_RollImg_left">
<p class="vrscienceandtechnology_big_RollImg_left_text1">360度全景模式</p>
<p class="vrscienceandtechnology_big_RollImg_left_text2">360度全景是通过对专业相机捕捉整个场景的图像信息，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照及计算机图变为360度全景景观（panaramic）。360度全景是通过对专业相机捕捉整个场景的图像信息，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照及计算机图变为360全景景观（panaramic）。</p>
</div>
<div class="vrscienceandtechnology_big_RollImg_right">
<img src="/OrchardLocal/Media/Default/vrscienceandtechnology/image1 (1).png" width="716" height="476" />
</div>
</li>
<li class="vrscienceandtechnology_big_RollImg_li">
<div class="vrscienceandtechnology_big_RollImg_left">
<p class="vrscienceandtechnology_big_RollImg_left_text1">360度全景模式</p>
<p class="vrscienceandtechnology_big_RollImg_left_text2">360度全景是通过对专业相机捕捉整个场景的图像信息，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照及计算机图变为360度全景景观（panaramic）。360度全景是通过对专业相机捕捉整个场景的图像信息，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照及计算机图变为360全景景观（panaramic）。</p>
</div>
<div class="vrscienceandtechnology_big_RollImg_right">
<img src="/OrchardLocal/Media/Default/vrscienceandtechnology/image1 (2).png" width="716" height="476" />
</div>
</li>
<li class="vrscienceandtechnology_big_RollImg_li">
<div class="vrscienceandtechnology_big_RollImg_left">
<p class="vrscienceandtechnology_big_RollImg_left_text1">360度全景模式</p>
<p class="vrscienceandtechnology_big_RollImg_left_text2">360度全景是通过对专业相机捕捉整个场景的图像信息，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照及计算机图变为360度全景景观（panaramic）。360度全景是通过对专业相机捕捉整个场景的图像信息，使用软件进行图片拼合，并用专门的播放器进行播放，即将平面照及计算机图变为360全景景观（panaramic）。</p>
</div>
<div class="vrscienceandtechnology_big_RollImg_right">
<img src="/OrchardLocal/Media/Default/vrscienceandtechnology/image1 (3).png" width="716" height="476" />
</div>
</li>
</ul>
</div>