用代码实现在页面的固定区域内实现图片的展示。 1. _人人网笔试题

她

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原生js slide</title>
	<style type="text/css">
	*{padding: 0; margin: 0;}
	#slide{
		width: 960px; height: 160px; position: relative; margin: 30px auto; border: 1px solid #ccc;
	}
	#slide .content{width: 960px;  height: 160px; overflow: hidden; position: relative;}
	#slide ul{
		position: absolute;
		-webkit-transition:all .27s ease-in;
		-moz-transition:all .27s ease-in;
		-o-transition:all .27s ease-in;
		transition:all .27s ease-in;}
	#slide li{list-style: none; float: left; width: 140px; height: 140px; margin: 10px; background: #c1c1c1; overflow: hidden;}
	#slide .next,#slide .prev{position: absolute;  width: 28px; height: 28px; background: #999; overflow: hidden;}
	#slide .next{right: -28px; top: 66px;}
	#slide .prev{left: -28px; top: 66px;}
	</style>
</head>
<body>
	<div id="slide">
		<div class="content">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
			</ul>
		</div>
		<a class="next" id="next" href="javascript:;">next</a>
		<a class="prev" id="prev" href="javascript:;">prev</a>
	</div>
	<script type="text/javascript">
	var obj = document.getElementById('slide');
	var next = document.getElementById('next'),
		prev = document.getElementById('prev'),
		ul = obj.getElementsByTagName('ul')[0],
		liArr = obj.getElementsByTagName('li'),
		li_width = liArr[0].offsetWidth + 20,
		li_length = liArr.length,
		show_length = 6,
		index = 0;
	function slide(){
		ul.style.width = li_width * li_length + 'px';
		ul.style.left = 0;
	}
	function animation(){
		if(index <= 0){
			prev.style.cursor = 'default';
			next.style.cursor = 'pointer';
			index = 0;
		}else if(index >= (li_length - show_length)){
			prev.style.cursor = 'pointer';
			next.style.cursor = 'default';
			index = (li_length -show_length);
		}
		var goal = li_width * -index;
		ul.style.left = goal + 'px';
	}
	obj.onmousewheel = function(e){	
		var d = parseInt(e.wheelDelta)> 0 ? 1:-1;  //判断滚动方向
		index += 1*d;
		animation();
	}
	next.onclick = function(e){
		var target = e.target;
		prev.style.cursor = 'pointer';
		index += 1;
		animation();
	}
	prev.onclick = function(e){
		var target = e.target;
		next.style.cursor = 'pointer';
		index -= 1;
		animation();
	}
	slide();
	</script>
</body>
</html>

发表于 2015-11-05 15:50:57 回复(0)

︶ㄣωǒ微笑

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
*{margin:0;padding:0;}
li{list-style:none;}
body{font-size:14px;font-family:"Microsoft yahei";}
.clear{zoom:1;}
.clear:after{content:"";display:block;clear:both;height:0;}
.content{padding:5px 0;position:relative;border:1px solid #000000;width: 600px;
margin: 0 auto;}
.t{width:0;height:0;font-size:0;position:absolute;border-width:20px;top:50%;margin-top:-20px;cursor:pointer;}
.left{border-style:dashed solid dashed dashed;left:0;}
.right{border-style:dashed dashed dashed solid;right:0;}
.wrap{overflow:hidden;position:relative;margin:0 auto;border:1px solid #000000;width:420px;height:84px;}
.ul1{position:absolute;}
.ul1 li{float:left;padding:10px 5px;}
.black_l{border-color:transparent #000000 transparent transparent;}
.gray_l{border-color:transparent #ddd transparent transparent;}
.black_r{border-color:transparent transparent transparent #000000;}
.gray_r{border-color:transparent transparent transparent #ddd;}
img{width:60px;height:60px;}
</style>
</head>

<body>
<div id="demo" class="content">
<div class="t left black_l">
</div>
<div class="wrap">
<ul id="ul1" class="ul1 clear">
<li><a href=""><img src="images/1.png" alt="图片1"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片2"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片3"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片4"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片5"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片6"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片7"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片8"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片9"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片10"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片11"/></a></li>
<li><a href=""><img src="images/1.png" alt="图片12"/></a></li>
</ul>
</div>
<div class="t right black_r">
</div>
</div>
</body>
<script>
function cancel(obj,ev,fn)
{
if(obj.attachEvent){obj.attachEvent('on'+ev,function(){return fn.call(obj)})}
else{obj.addEventListener(ev,fn,false)}
}
function getByClass(oParent,sClass)
{
var aEl=oParent.getElementsByTagName('*');
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b');
for(var i=0;i<aEl.length;i++)
{
if(re.test(aEl[i].className)){aResult.push(aEl[i])}
}
return aResult;
}
</script>
<script>
(function()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var oDemo=document.getElementById('demo');
var aBtn=getByClass(oDemo,'t');
var now=0;
var deep_line=-(aLi.length-6)*aLi[0].offsetWidth;
var move_one=aLi[0].offsetWidth;
oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";
function gray()
{
if(oUl.offsetLeft<=deep_line){aBtn[1].className="t right gray_r";}
else{aBtn[1].className="t right black_r";}
if(oUl.offsetLeft>=0){aBtn[0].className="t left gray_l";}
else{aBtn[0].className="t left black_l";}
}
gray();
function getLeft(l)
{
if(l){var dis=-1;if(oUl.offsetLeft<=deep_line){oUl.style.left=deep_line+"px";}else{oUl.style.left=oUl.offsetLeft+dis*move_one+"px";}}//0
else{var dis=1;if(oUl.offsetLeft>=0){oUl.style.left=0+"px";console.log(1)}else{oUl.style.left=oUl.offsetLeft+dis*move_one+"px";}}//1
gray();
}
function mousewheel(ev)
{
var choose=ev||enent;
var True=true;
True=choose.wheelDelta?choose.wheelDelta<0:choose.detail>0 ;
getLeft(True);
if(choose.preventDefault){choose.preventDefault();}
return false;
}
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function()
{
getLeft(this.index);
}
}

cancel(oDemo,'mousewheel',mousewheel);
cancel(oDemo,'DOMMouseScroll',mousewheel);
}
)
()
</script>

</html>

试试吧

发表于 2015-01-30 12:32:39 回复(0)

Fh.皓

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#d2{

height:300px;

width:80%;

display:inline-block;

text-align:center;

}

*{

margin:0;

padding:0

}

img{

width:30%;

vertical-align:middle;

height:100%

}

span{

font-size:70px;

cursor:pointer;

}

</style>

</head>

<body>

</div>

</div>

var imgs = [01,02,03,04,05,06,07]

var s = 1;

function change(x){

if(x==0){

if(s<=1){s=1;alert("已经到头了")}else{s=s-1}

}else{

if(s>=5){s=5;alert("已经到头了")}else{s=s+1}

}

var cld = d2.children;

for(var i=0;i<cld.length;i++){

var p = cld[i].src

p = p.replace(/img\/.+\.jpg/,"img/0"+(s+i)+".jpg")

cld[i].src = p;

}

</script>

</body>

</html>

发表于 2020-11-14 17:01:55 回复(0)

无处不再

<!DOCTYPE html>
<html>     <head>         <meta charset="UTF-8">         <title>人人网</title>         <style type="text/css">             .Roll{                 width: 1200px;                 height: 200px;                 border: 1px solid #000000;                 padding-left: 28px;                 padding-right: 28px;                 overflow: hidden;                 position: relative;             }             .Roll ul{                 width:6000px;                 height: 200px;                 margin: 0;                 padding: 0;                 overflow: hidden;                 position: absolute;             }             .Roll .roll-ul{                 position: relative;                 height: 200px;                 overflow: hidden;                 border-left: 1px solid #000000;                 border-right: 1px solid #000000;             }             .Roll ul:after{                 content: '';                 clear: both;                 box-sizing: border-box;             }             .Roll ul li{                 list-style: none;                 width: 300px;                 height: 200px;                 float: left;                 padding: 10px;                 box-sizing: border-box;             }             .Roll ul li img{                 width: 280px;                 height: 180px;             }             .Roll .dj{                 position: absolute;                 width: 100%;                 height: 45px;                 left: 0;                 top: 50%;                 margin-top: -22.5px;             }             .Roll .dj a{                 position: absolute;                 width: 28px;                 height: 45px;                 top: 50%;                 margin-top: -22.5px;                 background-position: center;                 background-repeat: no-repeat;                 background-size: 28px 45px;             }             .Roll .dj .prev{                 background-image: url(img/left1.png);                 left: 0;             }             .Roll .dj .next{                 background-image: url(img/right1.png);                 right: 0;             }         </style>     </head>     <body>         <div class="Roll" id="jsRoll">             <div class="roll-ul">                 <ul>                     <li>                         <img src="img/b1.jpg"/>                     </li>                     <li>                         <img src="img/b2.jpg"/>                     </li>                     <li>                         <img src="img/b3.jpg"/>                     </li>                     <li>                         <img src="img/b4.jpg"/>                     </li>                     <li>                         <img src="img/b5.jpg"/>                     </li>                     <li>                         <img src="img/b6.jpg"/>                     </li>                     <li>                         <img src="img/b7.jpg"/>                     </li>                 </ul>             </div>             <div class="dj" id="arr">                 <a href="javascript:;" id="prev" class="prev"></a>                 <a href="javascript:;" id="next" class="next"></a>             </div>         </div>
   <script type="text/javascript">
           //获取元素
var box=document.getElementById("jsRoll");
var screenr=box.children[0];
var ul=screenr.children[0];//移动内容
var list=ul.children;
var ol=screenr.children[1];
var arr=document.getElementById("arr");
var arrRight=document.getElementById("prev");
var arrLeft=document.getElementById("next");
var weiImge=list[0].offsetWidth;
if(list.length == 7){             seamless(4);     }
//设置自动运动
timer=setInterval(function(){
//先进行判断是否走到最后一个
    if (pic==list.length-4) {
        //复制第一张图片用来无缝连接                           //回到开始状态
        ul.style.left=0+"px";
        pic=0;
    }
    if(pic<list.length-4) {
         
        pic++;
    var target=-pic*weiImge;
    animate(ul,{"left":target});
    }
}, 2000)
//设置显示隐藏
box.onmouseover=function(){
    arr.style.display="block";
    //删除复制的无缝连接图片
   
    if(list.length>7){
         unSeamless(4)
         ul.style.left=0+"px";
         pic=0;
    }     clearInterval(timer);     //兼容性写法，该函数也是网上别人写的，不过找不到出处了，蛮好的，所有我也没有必要修改了     //判断鼠标滚轮滚动方向     if (window.addEventListener)//FF,火狐浏览器会识别该方法         window.addEventListener('DOMMouseScroll', wheel, false);         window.onmousewheel = document.onmousewheel = wheel;//W3C     //统一处理滚轮滚动事件     function wheel(event){         var delta = 0;         if (!event) event = window.event;         if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”             delta = event.wheelDelta/120;              if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理         } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”             delta = -event.detail/3;         }         if (delta)             handle(delta);     }     //上下滚动时的具体处理函数     function handle(delta) {             if (delta <0){//向下滚动                 rightSoll()             }else{//向上滚动                 leftSoll();             }         }

}
box.onmouseout=function() {
    arr.style.display="none";
     timer=setInterval(function(){
        //先进行判断是否走到最后一个
        
    if (pic==list.length-4) {
        if(list.length == 7){             seamless(4)         }
        //回到开始状态
        ul.style.left=0+"px";
        pic=0;
    }
    if(pic<list.length-4) {
                 pic++;
    var target=-pic*weiImge;
    animate(ul,{"left":target});
    }
}, 2000)
}
//创建复制无缝连接效果
function  seamless (num){     for(var i=0;i<num;i++){         var firsImgt=list[i].cloneNode(true);         ul.appendChild(firsImgt);     }
}
//删除无缝效果
function unSeamless(num){          for(var i=0;i<num;i++){                  ul.removeChild(list[list.length-1])     }
}
//设置右键点击
var pic=0;
arrRight.onclick=function(){
    //先进行判断是否走到最后一个
    leftSoll();
}
//向左移动
function leftSoll(){     if (pic==list.length-4) {
        //回到开始状态
        //ul.style.left=0+"px";
        //pic=0;
        
        arrRight.style.backgroundImage="url(img/left2.png)";
        arrRight.style.pointerEvents="none";
    }
    if(pic<list.length-4) {
        arrLeft.style.backgroundImage="url(img/right1.png)";
        arrLeft.style.pointerEvents="auto";
        pic++;
    var target=-pic*weiImge;
    animate(ul,{"left":target});
    
    
    }
}
//左键点击
arrLeft.onclick=function(){
     rightSoll();
}
//向右移动
function rightSoll(){     if (pic==0) {
        //回到开始状态
        //ul.style.left=-(ul.offsetWidth-weiImge)+"px";
        //pic=list.length-1;
        
        arrLeft.style.backgroundImage="url(img/right2.png)";
        arrLeft.style.pointerEvents="none";
    }
    if (pic>0){
                 arrRight.style.backgroundImage="url(img/left1.png)";
        arrRight.style.pointerEvents="auto";
        pic--;
        var target=-pic*weiImge;
        animate(ul,{"left":target});
       
    }
}

//创建移动的函数
function animate(tag,obj) {
    //清除定时器
    clearInterval(tag.timer);
     tag.timer=setInterval(function (){
          for (var k in obj) {
            var target=obj[k]//目标位置
         //获取任意的样式属性
         //如果未设置某个属性。取出了auto，转换为NaN，这时为了程序可以执行。使用短路操作
            var leader=parseInt(getStyle(tag,k))||0;
            //获取步数
            var step=(target-leader)/10;
            //根据步数的正负来判断方向
            step=target>leader?Math.ceil(step):Math.floor(step);
            leader=leader+step;
            //设置相应的样式
            tag.style[k]=leader+"px";
            if (leader==target) {
                clearInterval(tag.timer);
            }

          }
    },20)
}
//获取相应属性
function getStyle(tag,attr) {
    return tag.currentStyle?tag.currentStyle[attr]:getComputedStyle(tag,null)[attr];
}
               </script>     </body>
</html>

发表于 2018-12-06 11:07:00 回复(0)

Samsaraa

连个答案都没有

发表于 2017-11-20 22:12:30 回复(0)

浅沫lxl


	
	
		<html lang="en">  
	

	

		<head>  
	

	

		    <meta charset="UTF-8">  
	

	

		    <title>Document</title>  
	

	

		    <style type="text/css">  
	

	

		    *{padding: 0; margin: 0;}    
	

	

		    #slide{    
	

	

		        width: 1000px;     
	

	

		        height: 160px;     
	

	

		        position: relative;     
	

	

		        margin: 30px auto;     
	

	

		        border: 1px solid #ccc;    
	

	

		    }    
	

	

		    #slide:hover{  
	

	

		        cursor: pointer;  
	

	

		    }  
	

	

		    #slide .list{    
	

	

		        width: 960px;      
	

	

		        height: 160px;     
	

	

		        overflow: hidden;  
	

	

		        margin: 0 auto;     
	

	

		        position: relative;    
	

	

		    }     
	

	

		    #slide .list-item{    
	

	

		        list-style: none;     
	

	

		        float: left;     
	

	

		        width: 140px;     
	

	

		        height: 140px;   
	

	

		        margin: 10px;     
	

	

		        background: #c1c1c1;     
	

	

		        overflow: hidden;    
	

	

		    }   
	

	

		    .current{  
	

	

		        border:2px solid red;  
	

	

		        list-style: none;  
	

	

		        height: 160px;  
	

	

		        width: 50%;  
	

	

		        position: absolute;  
	

	

		        left: 25%;  
	

	

		        background: red;   
	

	

		    }   
	

	

		    #slide .next,#slide .prev{    
	

	

		        position: absolute;      
	

	

		        width: 30px;     
	

	

		        height: 28px;     
	

	

		        background: #999;     
	

	

		        overflow: hidden;    
	

	

		        text-decoration: none;  
	

	

		    }    
	

	

		    #slide .next{right: 0; top: 66px;}    
	

	

		    #slide .prev{left: 0; top: 66px;}  
	

	

		    </style>  
	

	

		</head>  
	

	

		<body>  
	

	

		<div id="slide">    
	

	

		    <ul class="list" id="list">    
	

	

		        <li class="current">1</li>    
	

	

		        <li class="list-item">2</li>    
	

	

		        <li class="list-item">3</li>    
	

	

		        <li class="list-item">4</li>    
	

	

		        <li class="list-item">5</li>    
	

	

		        <li class="list-item">6</li>    
	

	

		        <li class="list-item">7</li>    
	

	

		        <li class="list-item">8</li>    
	

	

		        <li class="list-item">9</li>    
	

	

		        <li class="list-item">10</li>     
	

	

		    </ul>     
	

	

		    <a class="next" id="next" href="javascript:;">next</a>    
	

	

		    <a class="prev" id="prev" href="javascript:;">prev</a>    
	

	

		</div>    
	

	

		<script type="text/javascript">  
	

	

		window.onload=function(){  
	

	

		    class Slider{    
	

	

		        constructor(id){    
	

	

		            this.container=document.getElementById(id);//获取图片容器    
	

	

		            this.items=this.container.querySelectorAll('li');    
	

	

		        }    
	

	

		        getSelectorItem(){  //获取当前展示的图片    
	

	

		            let selected=this.container.querySelector('.current');    
	

	

		            return selected;    
	

	

		        }    
	

	

		        getSelectorItemIndex(){  //获取当前选中的图片的索引    
	

	

		            return Array.from(this.items).indexOf(this.getSelectorItem());    
	

	

		        }    
	

	

		        slideTo(idx){   //跳转到idx这一张图片    
	

	

		            let selected=this.getSelectorItem();    
	

	

		            if(selected){    
	

	

		                selected.className="list-item";//将当前展示的图片设置'隐藏样式'    
	

	

		            }    
	

	

		            let item=this.items[idx];    
	

	

		            if(item){    
	

	

		                item.className="current";//将要展示的图片设置'显示样式'    
	

	

		            }    
	

	

		        }     
	

	

		        slideNext(){   //下一张    
	

	

		            let currentIdx=this.getSelectorItemIndex();  
	

	

		            //防止最后一张，使其循环显示    
	

	

		            let nextIdx=(currentIdx+1)%this.items.length;    
	

	

		            this.slideTo(nextIdx);    
	

	

		        }    
	

	

		        slidePrev(){   //上一张    
	

	

		            let currentIdx=this.getSelectorItemIndex();   
	

	

		            //防止第一张，使其循环显示  
	

	

		            let prevIdx=(this.items.length+currentIdx-1)%this.items.length;    
	

	

		            this.slideTo(prevIdx);    
	

	

		        }    
	

	

		    }    
	

	

		    //创建实例，绑定作用域，自动循环  
	

	

		    let slider=new Slider('list');  
	

	

		    let timer=setInterval(slider.slideNext.bind(slider),3000);   
	

	

		    let sli=document.getElementById('slide');  
	

	

		    let prev=document.getElementById('prev');  
	

	

		    let next=document.getElementById('next');  
	

	

		    sli.onmouseover=function(){ //清除定时器  
	

	

		        clearInterval(timer);  
	

	

		    };   
	

	

		    sli.onmouseout=function(){ //重设定时器  
	

	

		        timer=setInterval(slider.slideNext.bind(slider),3000);  
	

	

		    };  
	

	

		    sli.onmousewheel=function(e){  
	

	

		        //判断滚动方向   
	

	

		        parseInt(e.wheelDelta)>0?slider.slideNext():slider.slidePrev();   
	

	

		    }  
	

	

		    next.onclick=function(){ //下一张  
	

	

		        if (slider.getSelectorItemIndex()!==slider.items.length-1) {  
	

	

		            slider.slideNext();  
	

	

		        }else{  
	

	

		            next.style.cursor='default'; //图片滚动到末尾时不可点击  
	

	

		        }  
	

	

		    };  
	

	

		    prev.onclick=function(){ //前一张        
	

	

		        if (slider.getSelectorItemIndex()!==0) {  
	

	

		            slider.slidePrev();  
	

	

		        }else{  
	

	

		            prev.style.cursor='default'; //图片滚动到第一张时不可点击  
	

	

		        }  
	

	

		          
	

	

		    };  
	

	

		}  
	

	

		</script>  
	

	

		</body>  
	

	

		</html>

发表于 2017-09-03 20:37:57 回复(0)

Mr.Apple

<!DOCTYPE html>

<html>

<head>

<style>

body,

ul,

li {

padding: 0px;

margin: 0px;

}

img {

border: none;

}

li {

list-style: none;

}

a {

text-decoration: none;

color: #000;

}

.img-scroll {

width: 100%;

position: relative;

}

.img-warp {

height: 152px;

width: 1200px;

overflow: hidden;

margin: 0 auto;

position: relative;

}

.img-list {

position: absolute;

left: 0px;

top: 0px;

}

.img-list li {

float: left;

}

.img-list li img {

width: 190px;

height: auto;

padding: 5px;

}

.img-arrow {

display: block;

height: 60px;

width: 60px;

font-size: 60px;

position: absolute;

top: 50%;

margin-top: -30px;

}

.img-next {

right: 0px;

}

.img-prev {

left: 0px;

}

</style>

</head>

<body>

</ul>

</div>

</div>

function getStyle(obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return getComputedStyle(obj, false)[attr];

}

function startMove(obj, attrs, func) {

clearInterval(obj.timer);

obj.timer = setInterval(function() {

var flagStop = true;

for (var attr in attrs) {

var curStyle = 0;

if (attr == 'opacity') {

curStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100);

} else {

curStyle = parseInt(getStyle(obj, attr));

}

var n = 6;

var speed = (attrs[attr] - curStyle) / n;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (curStyle != attrs[attr]) {

flagStop = false;

}

if (attr == 'opacity') {

obj.style.opacity = (curStyle + speed) / 100;

obj.style.filer = 'alpha(opacity:' + curStyle + speed + ')';

} else {

obj.style[attr] = curStyle + speed + 'px';

}

if (flagStop) {

clearInterval(obj.timer);

if (func) func();

}

}, 30)

}

eventUtil.addHandler(window, "load", function() {

var obj_document = document;

var img_prev = obj_document.getElementById('img-prev');

var img_next = obj_document.getElementById('img-next');

var img_warp = obj_document.getElementById('img-warp');

var img_list = obj_document.getElementById('img-list');

var img_item = img_list.getElementsByTagName('li')

var len = img_item.length;

var item_width = img_item[0].offsetWidth;

img_list.style.width = item_width * len + "px";

var warp_width = img_warp.offsetWidth;

var tag = 0, //左侧隐藏数量

num = parseInt(warp_width / item_width); //显示数量

var max = len - num, //左侧最多隐藏数量

min = 0; //左侧最少隐藏数量

eventUtil.addHandler(img_prev, "click", function(event) { //上一个单击事件

if (tag == max) {

this.style.disabled = true;

} else {

tag++;

this.style.disabled = false;

startMove(img_list, {

'left': -tag * item_width

});

}

});

eventUtil.addHandler(img_next, "click", function(event) { //下一个单击事件

if (tag == min) {

this.style.disabled = true;

} else {

tag--;

this.style.disabled = false;

startMove(img_list, {

'left': -tag * item_width

});

}

});

function handleMouseWheel(event) {

event = eventUtil.getEvent(event);

var delta = eventUtil.getWheelDelta(event);

if (delta > 0) {

if (tag == max) {

img_prev.style.disabled = true;

} else {

tag++;

img_prev.style.disabled = false;

startMove(img_list, {

'left': -tag * item_width

});

}

} else {

if (tag == min) {

img_next.style.disabled = true;

} else {

tag--;

console.log()

img_next.style.disabled = false;

startMove(img_list, {

'left': -tag * item_width

});

}

eventUtil.addHandler(img_list, "mousewheel", handleMouseWheel);

eventUtil.addHandler(img_list, "DOMMouseScroll", handleMouseWheel);

});

</script>

</body>

</html>

发表于 2016-08-07 17:01:43 回复(0)

_大越越

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollImg</title>
    <style> *{
            margin:0px;
            padding:0px;;
        }
        .container{
            margin:30px auto;
            width:960px;
            height: 120px;;
            border: 1px solid black;
            position:relative;
            overflow:hidden;
        }
        .leftControl{
            width:30px;
            height:118px;
            float:left;
            display:inline;
        }
        .leftControl img{
            margin:48px 3px 48px 3px;
            width:24px;
            height:24px;
        }
        .imgContain{
            width:898px;
            height:100px;
            margin:8px 0px 5px 0px;
            border: 1px solid black;
            float:left;
            display:inline;
        }
        .imgContain ul{
            list-style: none;
        }
        .imgIn{
            width:80px;
            height:80px;
        } li{
            position:relative;
            float:left;
            width:80px;
            height:80px;
            background-color: #cccccc;
            margin:10px 0px 10px 29px;
            text-align: center;
            line-height: 80px;
        }
        .rightControl{
            width:30px;
            height:118px;
            float:left;
            display:inline;

        } #rightA{
            cursor:default;
        }
        .rightControl img{
            margin:48px 3px 48px 3px;
            width:24px;
            height:24px;
        }
    </style>
    <script> var i=0; var c=8;//显示图片数  if(document.addEventListener){ document.addEventListener('DOMMouseScroll',mouseWheelHandler,false);
         }//W3C  window.onmousewheel=document.onmousewheel=mouseWheelHandler;//IE/Opera/Chrome/Safari   function mouseWheelHandler(e) { var direct = 0;
            e=e || window.event; //ie,opera,chrome  if(e.wheelDelta){ if(e.wheelDelta==120){ //向上滚动事件  after();
                } else{ //向下滚动事件  before();
                }
            } //firefox  if(e.detail){ if(e.detail==-3){ //向上滚动事件  after();
            } else{ //向下滚动实践  before();
            }
            }
        } function after(){ var lcount=document.getElementsByTagName("ul")[0]; var licount=lcount.getElementsByTagName("li"); if(i<licount.length-c){ licount[i].style.display="none"; i++; document.getElementById("rightA").style.cursor="pointer"; if(i==licount.length-c){ document.getElementById("leftA").style.cursor="default";
                }
            }
        } function before(){ if(i>0){ var lcount=document.getElementsByTagName("ul")[0]; var licount=lcount.getElementsByTagName("li"); licount[i-1].style.display="inline"; i--; document.getElementById("leftA").style.cursor="pointer"; if(i==0){ document.getElementById("rightA").style.cursor="default";
                }
            }
        }

    </script>

</head>
<body>
    <div class="container">
        <div class="leftControl">
            <a id="leftA" href="javascript:void(0);" onclick="after()"><img src="img/left.jpg"></a>
        </div>
        <div id="main" class="imgContain">
            <ul>
                <li><img class="imgIn" src="img/1.jpg"></li>
                <li><img class="imgIn" src="img/3.jpg"></li>
                <li><img class="imgIn" src="img/left.jpg"></li>
                <li><img class="imgIn" src="img/right.jpg"></li>
                <li><img class="imgIn" src="img/1.jpg"></li>
                <li><img class="imgIn" src="img/3.jpg"></li>
                <li><img class="imgIn" src="img/left.jpg"></li>
                <li><img class="imgIn" src="img/right.jpg"></li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
            </ul>
        </div>
        <div class="rightControl">
            <a id="rightA" href="javascript:void(0);" onclick="before()"><img src="img/right.jpg"></a>
        </div>
    </div>
</body>
</html>

发表于 2016-07-07 16:45:53 回复(0)

hy5201

<!doctype html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>picture show</title>
       <style>
           #container{
               border:1px solid #ccc;
               height:100px;
               position:relative;
           }
           .clear{
               clear:both;
           }
           .arrows{
               display:inline-block;
               width:100px;
               height:100px;
               line-height:100px;
               border:1px solid #eee;
               text-align:center;
               font-size:32px;

           }

           #leftarrows{
               position:absolute;
               top:0;
               left:0;
           }
           #picContain{
               margin-left:102px;
               margin-right:102px;

           }
           #rightarrows{
               position:absolute;
               top:0;
               right:0;
           }
           img{
               width:20%;
               height:100px;
               overflow:hidden;
           }
       </style>
       <script>
       window.onload=function(){
           var arr=["11.jpg","22.jpg","33.jpg","44.jpg","55.jpg","66.jpg","11.jpg","22.jpg"];
           for(var i=0;i<5;i++){
               var picContain=document.getElementById("picContain");
               var img=document.createElement("img");
               img.src=arr[i];
               picContain.appendChild(img);
           }

           var leftarrows=document.getElementById("leftarrows");
           var rightarrows=document.getElementById("rightarrows");
           var flag=0;
           leftarrows.style.color="#ccc";
           leftarrows.onclick=function(){
               if(flag==0){
                   leftarrows.style.color="#ccc";

               }else{
                   var imgs=document.getElementsByTagName("img");
                   flag--;
                   for(var j=0;j<5;j++){
                       imgs[j].src=arr[flag+j];//imgs[i].setAttribute("src",arr[j+flag]);
                   }
                   if(flag==0){
                       leftarrows.style.color="#ccc";
                   }

               }
               rightarrows.style.color="#000";
           }
           rightarrows.onclick=function(){
               if(flag==(arr.length-5)){
                   rightarrows.style.color="#ccc";

               }else{
                   var imgs=document.getElementsByTagName("img");
                   flag++;
                   for(var j=0;j<5;j++){
                       imgs[j].src=arr[flag+j];//imgs[i].setAttribute("src",arr[j+flag]);
                   }
                   if(flag==arr.length-5){
                       rightarrows.style.color="#ccc";
                   }
               }
               leftarrows.style.color="#000";
           }




       }



       </script>
   </head>
   <body>
       <div id="container">
           <div id="leftarrows" class="arrows"><</div>
           <div id="rightarrows" class="arrows">></div>
           <div id="picContain">
           </div>
       </div>
   </body>
</html>

发表于 2015-11-05 16:17:26 回复(0)

hooper_001

发表于 2015-09-07 11:06:10 回复(0)

ruru

<pre class="prettyprint lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .m-gallery { width: 300px; } .m-gallery .rel { position: relative; width: 240px; height: 80px; border: 2px solid black; overflow: hidden; } .m-gallery .abs { position: absolute; top: 0px; left: 0px; width: 9999px; height: 80px; } .m-gallery .imgage { float: left; width: 50px; height: 50px; margin: 15px; background-color: red; } .m-gallery .imgage:nth-child(odd) { background-color: blue; } #toLeft { float: left; } #toRight { float: right; } </style> </head> <body> <div class="m-gallery"> <button id="toLeft">&gt;-</button> <button id="toRight">-&lt;</button> <div class="rel"> <div class="abs" id="absWrap"> <div class="imgage">1</div> <div class="imgage">2</div> <div class="imgage">3</div> <div class="imgage">4</div> <div class="imgage">5</div> <div class="imgage">6</div> <div class="imgage">7</div> <div class="imgage">8</div> <div class="imgage">9</div> <div class="imgage">10</div> <div class="imgage">11</div> <div class="imgage">12</div> </div> </div> </div> <script type="text/javascript"> /* 属性渐变效果实现 todo 缺少动画是否运行的判断 */ function transitionStyle(from, to, duration, framesPerSecond, callback) { var totalFrames = framesPerSecond * duration; //计算总的帧数 var step = function(curStyle, frame) { var time = (frame / totalFrames) * duration * 1000; setTimeout(function() { callback(curStyle); }, time); }; //设置每一帧的动作 var frame = 1; from = parseInt(from); to = parseInt(to); var stepLen = (to - from) / totalFrames; while (frame < totalFrames) { var curStyle = Math.ceil(from + stepLen * frame); step(curStyle, frame); frame++; } //设置中间帧 step(from, 0); //设置第一帧 step(to, totalFrames); //设置最后一帧 } window.addEventListener('load', function() { var totalImages = 12; var count = 0; var toL = document.querySelector('#toLeft'); var toR = document.querySelector('#toRight'); var abs = document.querySelector('#absWrap'); var callback = function(curS) { curS = curS + 'px'; abs.style.setProperty('left', curS); } var doToL = function() { count++; if (count > totalImages) { alert('到达末尾'); return; } var left = document.defaultView.getComputedStyle(abs).getPropertyValue('left'); var from = parseInt(left); var to = from - 80; console.log(from + ' ' + to); transitionStyle(from, to, 1, 36, callback); }; var doToR = function() { count--; if (count < 0) { alert('到达末尾'); return; } var left = document.defaultView.getComputedStyle(abs).getPropertyValue('left'); var from = parseInt(left); var to = from + 80; transitionStyle(from, to, 1, 36, callback); }; toL.addEventListener('click', doToL, false); toR.addEventListener('click', doToR, false); }, false); </script> </body> </html></pre> <br />

发表于 2015-08-14 21:10:00 回复(0)

Funky_Lover_阿輝

发表于 2014-12-01 10:26:29 回复(0)

执侯

发表于 2014-11-28 16:47:00 回复(0)

执侯

发表于 2014-11-28 16:45:35 回复(0)

撒

发表于 2014-11-18 20:20:36 回复(0)

撒

发表于 2014-11-18 20:20:30 回复(0)

潇湘

3.供参考：不支持firefox

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrolll横向滚动</title>
<script src="jquery.js"></script>
<style>
ul,li{padding: 0;margin: 0;list-style: none;}
#container{
border: solid 1px #ccc;
width: 520px;
height: 120px;
overflow: hidden;
position: relative;
}
#container ul{width: 1000px;height: 100%;position: absolute;top: 0;left: 0;}
#container li{
display: block;width: 90px;margin:10px 4px;
border:solid 1px #ccc;height: 98px;float: left;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script type="text/javascript">
var scrollFunc=function(e){
var _left = $('#container ul')[0].offsetLeft;
if(e.wheelDelta < 0 ){ // -120
if(-_left < ($('#container ul').width()-520))
$('#container ul').css({'left':(_left-100)+'px'})
}else{ // 120
if(_left<0)
$('#container ul').css({'left':(_left+100)+'px'})
}
}
document.getElementById("container").onmousewheel=scrollFunc;
</script>
</body>
</html>

发表于 2014-11-07 17:05:39 回复(0)

用代码实现在页面的固定区域内实现图片的展示。 1.

问题信息

热门推荐

相关试题