<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
list-style: none;
margin: 0;
padding: 0;
}
#outer{
width: 320px;
height: 300px;
margin: 50px auto;
background-color: lightpink;
padding: 12px 0px ;/*上右下左*/
overflow: hidden; / * hide content overflow * /
position: relative;
}
#imgList {
width:; / * used to automatically set #imgList width js * /
position: Absolute; / * subelements absolute positioning relative to the parent element * /
:; left / * for each shift to the next 320px * /
}
#imgList {Li
a float : left;
padding: 0px 10px;
}
#navDiv {
position: Absolute;
bottom: 15px;
left:; / *Navigation center automatically set by JS * /
}
#navDiv A {
width: 15px;
height: 15px;
background - Color: Red;
margin: 0 5px;
a float : left;
Opacity: 0.5; / * a transparent * /
}
#navDiv A: hover { / * set mouse diffusion effects * /
background - Color: Black;
}
</ style>
</ head>
<body>
<div ID = "Outer">
<UL ID = "imgList">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<!--创建图片导航按钮-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"> </a>
* - parameters:attempt to construct a function can perform simple animations/ *
<Script of the type =" text / JavaScript ">
</ body>
</ div>
</ div>
* Obj: To perform object animation
* attr: To perform the animation style, such as height width Top left
* target: Animate destination
* speed: the speed of movement (positive to the right, negative left)
* callback: callback function, which will be executed after serving animation
* /
function the Move (obj, attr, target, Speed, callback) {
// Close on a timer to prevent accelerated
clearInterval (obj.timer);
// Gets the current element position
var Current = the parseInt (the getStyle (obj, attr));
// negative determination speed
// if moved from 0-800, the speed is positive, 800-0 move as a negative
IF (Current> target) {
/ / At this speed is negative
= Speed - Speed;
}
// - start a timer, to perform animation
obj.timer = the setInterval ( function () {
// Get the original target value of the left
var oldValue = the parseInt (the getStyle (obj, attr));
// old value increased basis
var newValue = oldValue + Speed;
IF ((Speed <0 && newValue <target) || (Speed> 0 && newValue> target)) {
newValue = target;
}
// set the new value to the target
obj.style [attr] = newValue + "PX" ;
IF (newValue ==target) {
// reaches the target value, the timer is turned off
the clearInterval (obj.timer);
// animation is finished, the callback function call
the callback && the callback ();
}
}, 30 );
}
/ * defines an element to obtain the specified element the current style
* - parameters:
* obj: for element style
* name: to obtain the style name
* /
function the getStyle (obj, name) {
return the getComputedStyle (obj, null ) [name];
}
</ Script>
<Script type = "text / JavaScript"> // 1. automatically set the width #imgList
var imgList = document.getElementById ( "imgList");
Var imgArr = document.getElementsByTagName ( "Li" );
// width automatically vary image
imgList.style.width imgArr.length + = 320. * "PX" ;
// 2. navigation center automatically set
var navDiv = Document. the getElementById ( "navDiv" );
var Outer = document.getElementById ( "Outer" );
// set #navDiv automatically vary image
navDiv.style.left = (outer.offsetWidth-navDiv.offsetWidth) / 2 + "px"; // 3. By default, the current picture navigation buttons var Alla document.getElementsByTagName = ( "a" );
var index = 0 ;
Alla [index] .style.backgroundColor="black"
;
// 4. Click on the first x x hyperlinks Showing pictures
for (i = 0; i <allA.length; i ++ ) {
// to get a few clicks of the first super combos to Add a num attribute
Alla [I] .num = I;
// to add a click function
Alla [I] .onclick = function () {
// set the priority click animation, the animation automatically click to end
the clearInterval (Timer);
/ / Alert (the this);
// get the click of a index
// Alert (this.num);
index = the this .num;
// switch picture
// imgList.style.left = -320 * index + "PX";
/ /Animation into
Move (imgList, "left", - 320. * index, 20 is, function () {
// set the click animation priority, and then automatically started animation
Start ();
});
setA ();
}
}
// 5. The Create a set the selected method a
function setA () {
// Analyzing
IF (index> =-imgArr.length. 1 ) {
index = 0 ;
imgList.style.left = 0 ;
}
// set back not clicked red
for ( 0 = I; I <allA.length; I ++ ) {
Alla [I] .style.backgroundColor = "";
}
// selected to black
Alla [index] = .style.backgroundColor "Black" ;
}
// 6. The automatic switching image
Start ();
var Timer;
function Start () {
Timer = the setInterval ( function () {
index ++ ;
// Analyzing
index = index% imgArr.length; // with the above determination if = 0% 4 41% 4% 4 = 1 ... 4 = 0
// rotation
move (imgList, "left ", -320 * index, 20 is, function () {
// modify button corresponding to the navigation
setA ();
});
}, 3000 )
}
// rotation animation FIG finally completed
</ Script>
</ HTML>