当前位置:天才代写 > 其他代写 > 代写网页特效HTML和Javascript题目:《人机界面设计》实验指导书 Part2:网页特效技术二—多图片滚动切换控件的实现

代写网页特效HTML和Javascript题目:《人机界面设计》实验指导书 Part2:网页特效技术二—多图片滚动切换控件的实现

2017-12-22 08:00 星期五 所属: 其他代写 浏览:922

《人机界面设计》实验指导书

Part2:网页特效技术二多图片滚动切换控件的实现

 

一、 任务

利用以下讲述的技术,设计一个包含图片滚动切换效果的网页。在做完以后,考虑如何为控件增加其他出场效果,例如:淡入淡出等。

 

二、 效果预览

123.jpg

三、 原理

1. 开始时,将第一张图片显示在视口内,其余图片用CSS改变位置,使它们堆叠在视口右侧;

 

图例:1234.jpg

 

2. 通过动画将视口内的图片移到左侧,右侧的下一张图片紧跟着移动到视口内;

 12345.jpg

3. 将移到左侧的图片移到视口右侧最下方

123456.jpg

4. 转到第2步。

 

四、 核心代码

1. HTML

<div id='slider'>

<ul>

<li id='li1' data-title='行到水穷处,坐看云起时'><a href='#'><img src='1.jpg' /></a></li>

<li id='li2' data-title='远处蔚蓝天空下涌动着金色的麦浪…'><a href='#'><img src='2.jpg' /></a></li>

<li id='li3' data-title='xyzxyzxyzxyz'><a href='#'><img src='3.jpg' /></a></li>

</ul>

</div>

 

2. CSS

.slider {

overflow: hidden;

}

 

.slider ul {

list-style: none;

margin: 0;

padding: 0;

}

 

.slider ul li {

margin: 0;

padding: 0;

display: block;

list-style: none;

}

 

.slideitem {

position: relative;

}

 

.tag {

position: relative;

}

思考:代码是如何改变<ul>元素的外观的?又是如何为改变图片的原始位置做准备的?

3. JS

$.fn.slider = function () {

$(this).addClass('slider');

 

var id = $(this).attr('id');

 

var lis = $('.slider ul li');

var len = lis.length;

var w = $('.slider').width();

var h = $('.slider').height();

$(lis).addClass('slideitem').each( function (i) {

$(this).css({left: !i ? 0 : w, top: -i * h, 'z-index':i});

$(this).append("<div>" + $(this).data('title') + "</div>");

});

 

var q = [];

var i;

for (i = 2; i <= len; ++i)

q.push(i);

q.push(1);

 

$('#li1').addClass('cur');

setInterval(function(){

var cur = q.shift();

var zz = len;

for (x in q)

{

var liid = '#li' + q[x];

$(liid).css({'z-index': zz–});

}

q.push(cur);

 

var liid = '#li' + cur;

$('.cur').animate({left: -w}, 500);

$(liid).animate({left: 0}, 500, function () {

$('.cur').removeClass('cur').css({left: w, 'z-index': 0});

$(this).addClass('cur');

})

}, 2000);

}

思考:代码是如何改变图片的位置以及堆叠顺序的?

 

五、实验附件上传

请将你编写的.html.js(含jquery.js)、图片压缩打包上传。

 

    关键字:

天才代写-代写联系方式