第一步，设计一下我想要的效果！
我用FW把以前作的相册效果（https://www.jb51.net/blogview.asp?logID=628）改了改，设计一张简单的效果图！
第二步，布局！
复制代码 代码如下:
<div id="imgBox">
<ul>
<li><a href="#"><img alt="this is 001" src="/UploadFiles/2021-04-02/20090404034546382.gif"><li><a href="#"><img alt="this is 001" src="/upload/20090404034546959.gif"><li><a href="#"><img alt="this is 001" src="/UploadFiles/2021-04-02/20090404034546983.gif"><li><a href="#"><img alt="this is 001" src="/upload/20090404034546145.gif"><li><a href="#"><img alt="this is 001" src="/UploadFiles/2021-04-02/20090404034546693.gif">
</ul>
</div>
这时可以看一下效果：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第三步，设计一下Javascript；
复制代码 代码如下:
<script>
ScrollImg = function(imgBoxId){
this.imgBoxId = imgBoxId; //拿到图片最外边的DIV的ID；
this.table = this.createTable(); //创建了一个一行三列的表格
this.setSpan(); //把图片上的ALT文件放在图片的后边
this.setOnclick(); //加点击事件和把内容放在表格中
this.$(this.imgBoxId).appendChild(this.table) //完成全部
}
ScrollImg.prototype = {
$:function(objId){
return document.getElementById(objId);
},
$$:function(n){
return document.createElement(n);
},
createTable:function(){
var table = this.$$('table');
var tr = this.$$('tr');
for(var k=0; k<3; k++) tr.appendChild(this.$$('td'));
var tbody = this.$$('tbody');
tbody.appendChild(tr);
table.appendChild(tbody);
return table;
},
setSpan:function(){
var links = this.$(this.imgBoxId).getElementsByTagName('a');
for(var k=0; k<links.length; k++){
var span = this.$$('span');
span.appendChild(document.createTextNode(links[k].getElementsByTagName('img')[0].alt));
links[k].appendChild(span);
}
return;
},
setOnclick:function (){
var imgArray = ['left', ,'right'];
var tds = this.table.getElementsByTagName('td');
for(var k=0; k<tds.length; k++){
tds[k].setAttribute('vAlign', 'center');
if(k == 1){
var div = this.$$('div');
var ul = this.$(this.imgBoxId).getElementsByTagName('ul')[0];
div.appendChild(ul);
tds[k].appendChild(div);
continue
}
var img = this.$$('img');
img.setAttribute('src', 'https://www.jb51.net/attachments/month_0902/'+imgArray[k]+'.gif');
img.setAttribute('alt', imgArray[k]);
img.style.cursor = 'pointer';
img.onclick = function (){
var imgBox = this.parentNode.parentNode.getElementsByTagName('div')[0];
var ns = imgBox.scrollLeft;
var tkey = 500;
if(this.alt == 'left'){
var left = setInterval(function(){
imgBox.scrollLeft = imgBox.scrollLeft - (tkey * 0.1);
tkey = tkey * 0.9;
if(tkey < 2) clearInterval(left);
},50);
} else {
var right = setInterval(function (){
imgBox.scrollLeft = imgBox.scrollLeft + (tkey * 0.1);
tkey = tkey * 0.9;
if(tkey < 2) clearInterval(right);
},50);
}
return;
}
tds[k].appendChild(img);
}
return;
}
}
var test = new ScrollImg('imgBox');
</script>
这个时候再看一下效果！
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第四步，写CSS来完成计划时的样子！
复制代码 代码如下:
<style>
/*重设所有的标属基本的属性，在实际中最好不要用*来写，性能不太好，作例子就算了*/
*{ margin:0; padding:0; list-style:none;}
/*设置一个网页的基本属性*/
body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;}
/*重设写有图片的属性，最主要是解决浏览器的空格BUG*/
img{ border:0; display:block;vertical-align:middle}
/*最外边的DIV的边框和背景色简单设置一下*/
#imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;}
/*这个DIV在布局时是没有的，是我用JAVASCRIPT创建的，我把他的宽度写死，溢出的内容全部隐藏*/
#imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden}
/*这里是父子全加了浮动，以浮制浮，解决自动适应的问题，并让图片横向排列*/
#imgBox,#imgBox ul,#imgBox li{ float:left;}
/*这里其它应该让JAVASCRIPT去计算宽度，就可以实现图片无限加减，都会自适应，我这里偷了个懒，直接写死了*/
#imgBox ul{ width:4100px;}
/*下边这些就是写了一下链接和效果，没什么*/
#imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none}
#imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF}
#imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;}
#imgBox a:hover span{ background:#000; color:#fff}
</style>
好了，全部完成，看一下最后的效果吧！
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
我用FW把以前作的相册效果（https://www.jb51.net/blogview.asp?logID=628）改了改，设计一张简单的效果图！
第二步，布局！
复制代码 代码如下:
<div id="imgBox">
<ul>
<li><a href="#"><img alt="this is 001" src="/UploadFiles/2021-04-02/20090404034546382.gif"><li><a href="#"><img alt="this is 001" src="/upload/20090404034546959.gif"><li><a href="#"><img alt="this is 001" src="/UploadFiles/2021-04-02/20090404034546983.gif"><li><a href="#"><img alt="this is 001" src="/upload/20090404034546145.gif"><li><a href="#"><img alt="this is 001" src="/UploadFiles/2021-04-02/20090404034546693.gif">
</ul>
</div>
这时可以看一下效果：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第三步，设计一下Javascript；
复制代码 代码如下:
<script>
ScrollImg = function(imgBoxId){
this.imgBoxId = imgBoxId; //拿到图片最外边的DIV的ID；
this.table = this.createTable(); //创建了一个一行三列的表格
this.setSpan(); //把图片上的ALT文件放在图片的后边
this.setOnclick(); //加点击事件和把内容放在表格中
this.$(this.imgBoxId).appendChild(this.table) //完成全部
}
ScrollImg.prototype = {
$:function(objId){
return document.getElementById(objId);
},
$$:function(n){
return document.createElement(n);
},
createTable:function(){
var table = this.$$('table');
var tr = this.$$('tr');
for(var k=0; k<3; k++) tr.appendChild(this.$$('td'));
var tbody = this.$$('tbody');
tbody.appendChild(tr);
table.appendChild(tbody);
return table;
},
setSpan:function(){
var links = this.$(this.imgBoxId).getElementsByTagName('a');
for(var k=0; k<links.length; k++){
var span = this.$$('span');
span.appendChild(document.createTextNode(links[k].getElementsByTagName('img')[0].alt));
links[k].appendChild(span);
}
return;
},
setOnclick:function (){
var imgArray = ['left', ,'right'];
var tds = this.table.getElementsByTagName('td');
for(var k=0; k<tds.length; k++){
tds[k].setAttribute('vAlign', 'center');
if(k == 1){
var div = this.$$('div');
var ul = this.$(this.imgBoxId).getElementsByTagName('ul')[0];
div.appendChild(ul);
tds[k].appendChild(div);
continue
}
var img = this.$$('img');
img.setAttribute('src', 'https://www.jb51.net/attachments/month_0902/'+imgArray[k]+'.gif');
img.setAttribute('alt', imgArray[k]);
img.style.cursor = 'pointer';
img.onclick = function (){
var imgBox = this.parentNode.parentNode.getElementsByTagName('div')[0];
var ns = imgBox.scrollLeft;
var tkey = 500;
if(this.alt == 'left'){
var left = setInterval(function(){
imgBox.scrollLeft = imgBox.scrollLeft - (tkey * 0.1);
tkey = tkey * 0.9;
if(tkey < 2) clearInterval(left);
},50);
} else {
var right = setInterval(function (){
imgBox.scrollLeft = imgBox.scrollLeft + (tkey * 0.1);
tkey = tkey * 0.9;
if(tkey < 2) clearInterval(right);
},50);
}
return;
}
tds[k].appendChild(img);
}
return;
}
}
var test = new ScrollImg('imgBox');
</script>
这个时候再看一下效果！
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
第四步，写CSS来完成计划时的样子！
复制代码 代码如下:
<style>
/*重设所有的标属基本的属性，在实际中最好不要用*来写，性能不太好，作例子就算了*/
*{ margin:0; padding:0; list-style:none;}
/*设置一个网页的基本属性*/
body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;}
/*重设写有图片的属性，最主要是解决浏览器的空格BUG*/
img{ border:0; display:block;vertical-align:middle}
/*最外边的DIV的边框和背景色简单设置一下*/
#imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;}
/*这个DIV在布局时是没有的，是我用JAVASCRIPT创建的，我把他的宽度写死，溢出的内容全部隐藏*/
#imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden}
/*这里是父子全加了浮动，以浮制浮，解决自动适应的问题，并让图片横向排列*/
#imgBox,#imgBox ul,#imgBox li{ float:left;}
/*这里其它应该让JAVASCRIPT去计算宽度，就可以实现图片无限加减，都会自适应，我这里偷了个懒，直接写死了*/
#imgBox ul{ width:4100px;}
/*下边这些就是写了一下链接和效果，没什么*/
#imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none}
#imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF}
#imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;}
#imgBox a:hover span{ background:#000; color:#fff}
</style>
好了，全部完成，看一下最后的效果吧！
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
标签：
子鼠,滑动图片
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“非常不错的 子鼠 滑动图片效果 Javascript+CSS”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。