js图片左右滚动条切换特效代价

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js图片左右滚动条切换特效代价的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=utf-8" />
<title>js图片左右滚动条切换</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script src="js/zzsc.js"></script>
</head>

<body>

<div id="ztbox">
  <div id="left"></div>
  <div id="conter">
    <ul>
      <li><a href="javascript:;" target="_blank"><img src="images/b1.png" /></a></li>
      <li><a href="javascript:;" target="_blank"><img src="images/b2.png" /></a></li>
      <li><a href="javascript:;" target="_blank"><img src="images/b3.png" /></a></li>
      <li><a href="javascript:;" target="_blank"><img src="images/b4.png" /></a></li>
      <li><a href="javascript:;" target="_blank"><img src="images/b5.png" /></a></li>
      <li><a href="javascript:;" target="_blank"><img src="images/b6.png" /></a></li>
      <li><a href="javascript:;" target="_blank"><img src="images/b7.png" /></a></li>
    </ul>
    <div id="scroll"> <span></span> </div>
  </div>
  <div id="right"></div>
</div>
</body>
</html>

JS代码(zzsc.js):

function myEvent(obj,ev,fu){
	obj.attachEvent ? obj.attachEvent('on' + ev,fu):obj.addEventListener(ev,fu,false);
}
window.onload = function(){
	var oBox = document.getElementById('ztbox');
	var oLeft = document.getElementById('left');
	var oRight = document.getElementById('right');
	var oConter = document.getElementById('conter');
	var oUl = oConter.getElementsByTagName('ul')[0];
	var oLi = oConter.getElementsByTagName('li');
	var oScroll = document.getElementById('scroll');
	var oSpan = oScroll.getElementsByTagName('span')[0];
	var i = 0;
	oUl.style.width = 1250 +'px';
	//var iWidth = oScroll.offsetWidth/(oUl.offsetWidth / oConter.offsetWidth - 1)var iWidth=416;
	oLeft.onmouseover = oRight.onmouseover = function(){
	this.className = 'hover';
	//点击左侧按钮oLeft.onclick = function(){
	var butscroll = oSpan.offsetLeft - iWidth;
	oscroll(butscroll);
}
;
	//点击右侧按钮oRight.onclick = function(){
	var butscroll = oSpan.offsetLeft + iWidth;
	oscroll(butscroll);
}
;
}
;
	//点击滚动条oScroll.onclick = function(e){
	var oEvent = e || event;
	var butscroll = oEvent.clientX - oBox.offsetLeft - 53 - oSpan.offsetWidth / 2;
	oscroll(butscroll);
}
;
	oSpan.onclick = function(e){
	var oEvent = e || event;
	oEvent.cancelBubble=true;
}
oLeft.onmouseout = oRight.onmouseout = function(){
	this.className = '';
}
;
	//拖拽滚动条var iX = 0;
	oSpan.onmousedown = function(e){
	var oEvent = e || event;
	iX = oEvent.clientX - oSpan.offsetLeft;
	document.onmousemove = function(e){
	var oEvent = e || event;
	var l = oEvent.clientX - iX;
	td(l);
	return false;
}
;
	document.onmouseup = function(){
	document.onmousemove = null;
	document.onmouseup = null;
}
;
	return false;
}
;
	//滚轮事件function fuScroll(e){
	var oEvent = e || event;
	var l = oSpan.offsetLeft;
	oEvent.wheelDelta ? (oEvent.wheelDelta > 0 ? l-=iWidth:l+=iWidth):(oEvent.detail ? l+=iWidth:l-=iWidth);
	oscroll(l)if(oEvent.PreventDefault){
	oEvent.PreventDefault();
}
}
myEvent(oConter,'mousewheel',fuScroll);
	myEvent(oConter,'DOMMouseScroll',fuScroll);
	//滚动事件function oscroll(l){
	if(l < 0){
	l = 0;
}
else if(l > oScroll.offsetWidth - oSpan.offsetWidth){
	l = oScroll.offsetWidth - oSpan.offsetWidth;
}
var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth);
	sMove(oSpan,'left',Math.ceil(l));
	sMove(oUl,'left','-'+Math.ceil((oUl.offsetWidth - (oConter.offsetWidth + 15)) * scrol));
}
function td(l){
	if(l < 0){
	l = 0;
}
else if(l > oScroll.offsetWidth - oSpan.offsetWidth){
	l = oScroll.offsetWidth - oSpan.offsetWidth;
}
var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth);
	oSpan.style.left = l+'px';
	oUl.style.left = '-'+(oUl.offsetWidth - (oConter.offsetWidth + 15)) * scrol +'px';
}
}
;
	//运动框架function getStyle(obj,attr){
	return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
function sMove(obj,attr,iT,onEnd){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
	dMove(obj,attr,iT,onEnd);
}
,30);
}
function dMove(obj,attr,iT,onEnd){
	var iCur = 0;
	attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(obj,attr)*100)):iCur = parseInt(getStyle(obj,attr));
	var iS = (iT - iCur) / 5;
	iS = iS > 0 ? Math.ceil(iS):Math.floor(iS);
	if(iCur == iT){
	clearInterval(obj.timer);
	if(onEnd){
	onEnd();
}
}
else{
	if(attr == 'opacity'){
	obj.style.ficter = 'alpha(opacity:'+(iCur + iS)+')';
	obj.style.opacity = (iCur + iS) / 100;
}
else{
	obj.style[attr] = iCur + iS +'px';
}
}
}

CSS代码(zzsc.css):

@charset "utf-8";*{margin:0;padding:0;list-style:none;}
img{border:0;}
body{background:#23375C;padding-top:150px;}
#ztbox{width:970px;height:420px;margin:0 auto;}
#ztbox #left{width:35px;height:63px;float:left;cursor:pointer;background:url(../images/banner_pre.jpg) no-repeat;margin-top:140px;}
#ztbox #right{width:35px;height:63px;float:left;cursor:pointer;background:url(../images/banner_next.jpg) no-repeat;margin-top:140px;}
#ztbox #conter{width:880px;height:400px;float:left;display:inline;overflow:hidden;position:relative;margin:0px 10px;}
#ztbox #conter ul{width:auto;height:357px;top:0px;left:0px;position:absolute;overflow:hidden;}
#ztbox #conter li{width:167px;height:357px;float:left;padding:0px 5px;position:relative;}
#ztbox #conter li img{width:167px;height:357px;}
#ztbox #scroll{width:880px;height:18px;left:0px;bottom:8px;cursor:pointer;position:absolute;background:url(../images/banner_bg2.jpg) repeat-x left center;}
#ztbox #scroll span{width:48px;height:18px;left:0px;bottom:0px;cursor:pointer;position:absolute;background:#FFEA00;}

附件:下载该文件资源,减少时间成本(增值服务)