Method of Realizing Picture Rotation Action by javascript
- 2021-08-06 20:02:34
- OfStack
Picture rotation is a rather complex technology, which was basically realized by flash in early years. Here is a link to teach you how to implement it with flash. flash is used because flash is based on frames, which is quite close to the principle of picture rotation. In order to simulate the frame effect, we need to use overflow to mask the redundant part, which is often called mask layer in flash. In Flash, even the timeline is visible, and we use imagination and mathematics to calculate which chart we are now in. In addition, flash has the slow-moving formula of Robert Penner, which is too dazzling. It was not until script. aculo. us class library came up with its own slow-moving formula that the situation was reversed.
Let's look at 1. Look at the structure layer of picture rotation. It should contain a frame, a picture display area, a picture sliding layer and a paging bar. Forgive me for making so many words, because it is difficult to continue without a noun explanation. The predecessors did not make such a summary, and everyone was unwilling to share it. The frame is an div element, which serves two purposes: to provide a border for the album and to serve as a paging bar containing block. If you don't know what an inclusive block is (containing block), refer to the authoritative guide of CSS for yourself. Next, the picture display area and the picture sliding layer, which is the structure I realized the new seamless scrolling, a very clean unordered list, and all the difficulties moved to the CSS where it was set. As for the picture display area, it is the ul element, and the size is the size of one picture; Picture sliding layer is that li element, and there is only one li element. Using CSS, the picture inside it is forced to float to the left without wrapping, and setting li element with a large width, so that it can accommodate all pictures in one line. The pagination bar is an span element with many links, similar to a normal horizontal menu, except that it is placed in the lower right corner of the box with absolute positioning.
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt=" Petals in the moonlight " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt=" The limpid waters of the lake " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt=" Plants in the desert " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt=" Doomsday neon " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt=" Green business " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt=" It's the harvest season again " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
#album {
position:relative;/* For the paging bar */
width:400px;/* Must be set to prepare for the paging bar */
height:300px;/* Must be set to prepare for the paging bar */
border:10px solid #8080C0;
}
#album ul ,#album li {/* Eliminate the default style */
padding:0;
margin:0;
list-style:none;
}
#album ul{
position:relative; /* Slide area for picture */
height:300px;/* Must be set to hide redundant parts of the picture sliding area */
width:400px;/* Must be set to hide redundant parts of the picture sliding area */
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li { /* Picture sliding area */
position:absolute;
width:1000%;/* Let all the pictures in it be displayed side by side */
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {/* Paging column */
position:absolute;
right:0;
bottom:10px;
}
#album span a{
display:block;/* Let it own the box model */
margin-right:10px;/* Staggered grid */
width:15px;/* Be square */
height:15px;
line-height:15px;
text-align:center;/* Center display */
text-decoration:none;/* Eliminate underlines */
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover ,#album span a.hover{
color:#F8F8F8;
background-position:0 0;
}
<!doctype html>
<title>javascript Picture rotation by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Picture rotation by Situ Masami " />
<meta name="description" content="javascript Picture rotation by Situ Masami " />
<style type="text/css">
#album {
position:relative;/* For the paging bar */
width:400px;/* Must be set to prepare for the paging bar */
height:300px;/* Must be set to prepare for the paging bar */
border:10px solid #8080C0;
}
#album ul ,#album li {/* Eliminate the default style */
padding:0;
margin:0;
list-style:none;
}
#album ul{
position:relative; /* Slide area for picture */
height:300px;/* Must be set to hide redundant parts of the picture sliding area */
width:400px;/* Must be set to hide redundant parts of the picture sliding area */
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li { /* Picture sliding area */
position:absolute;
width:1000%;/* Let all the pictures in it be displayed side by side */
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {/* Paging column */
position:absolute;
right:0;
bottom:10px;
}
#album span a{
display:block;/* Let it own the box model */
margin-right:10px;/* Staggered grid */
width:15px;/* Be square */
height:15px;
line-height:15px;
text-align:center;/* Center display */
text-decoration:none;/* Eliminate underlines */
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover ,#album span a.hover{
color:#F8F8F8;
background-position:0 0;
}
</style>
<h4>javascript Picture rotation by Situ Masami </h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt=" Petals in the moonlight " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt=" The limpid waters of the lake " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt=" Plants in the desert " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt=" Doomsday neon " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt=" Green business " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt=" It's the harvest season again " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
This is like my previous series 1, and you can click to switch without JS. However, it used to use anchor points to change the value of scrollTop, but now it is changing the value of scrollLeft.
If you don't use the slow action effect, it is very simple.
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0];
slide.innerHTML += slide.innerHTML;
var item = slide.getElementsByTagName("a"),
critical = item[item.length/2].offsetLeft,// Critical value
distance = critical/(item.length/2),
delta = - distance;
(function(){// Realize automatic rotation of pictures
setTimeout(function(){
delta = delta - distance;
if(delta < -critical){
delta = - distance;
}
slide.style.left = delta + "px";// ★ ★ ★ ★ ★ ★ ★ ★
setTimeout(arguments.callee,1500)
},1500)
})()
}To use slow motion, use my slow motion formula and transition function, and call it in the position of asterisk.
<!doctype html>
<title>javascript Picture rotation by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Picture rotation by Situ Masami " />
<meta name="description" content="javascript Picture rotation by Situ Masami " />
<style type="text/css">
#album {
position:relative;
width:400px;
height:300px;
border:10px solid #8080C0;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var spring= function(pos) {
return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
}
var transition = function(el){
var options = arguments[1] || {},
begin = options.begin,// Start position
change = options.change,// Variation
duration = options.duration || 500,// Duration of slow motion effect
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,// Slow motion formula to use
end = begin + change,// End position
startTime = new Date().getTime();// Time to start execution
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),// The time at which the current frame starts
timestamp = newTime - startTime,// Lost time
delta = ease(timestamp / duration);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
length = links.length, aBefore = length, aIndex;
slide.innerHTML += slide.innerHTML;
var item = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,// Critical value
distance = critical/length,
delta = - distance;
(function(){// Realize automatic rotation of pictures
setTimeout(function(){
delta = delta - distance;
if(delta < -critical){
delta = - distance;
}
aIndex = - delta/distance;
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
transition(slide,{begin:delta,change:distance,ease:spring})
setTimeout(arguments.callee,1500)
},1500)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<h4>javascript Picture rotation by Situ Masami </h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt=" Petals in the moonlight " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt=" The limpid waters of the lake " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt=" Plants in the desert " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt=" Doomsday neon " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt=" Green business " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt=" It's the harvest season again " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
We can also add a message bar like Part 1, so that the program has three timers, which looks a little dizzy. In reality, it is not recommended to do so. Here is just how to use the callback function of transition under Model 1.
// Dynamic generation li Element and inserts it into the DOM In the tree.
var tip = document.createElement("li");// Information column
tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
}else{
tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
}
<!doctype html>
<title>javascript Picture rotation by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Picture rotation by Situ Masami " />
<meta name="description" content="javascript Picture rotation by Situ Masami " />
<style type="text/css">
#album {
position:relative;
width:400px;
height:300px;
border:10px solid #8080C0;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var easeInOutCubic= function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
}
var transition = function(el){
var options = arguments[1] || {},
begin = options.begin,// Start position
change = options.change,// Variation
duration = options.duration || 500,// Duration of slow motion effect
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,// Slow motion formula to use
end = begin + change,// End position
startTime = new Date().getTime();// Time to start execution
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),// The time at which the current frame starts
timestamp = newTime - startTime,// Lost time
delta = ease(timestamp / duration);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
images = slide.getElementsByTagName("img"),
length = links.length, aBefore = length, aIndex;
slide.innerHTML += slide.innerHTML;
var tip = document.createElement("li");
tip.style.cssText = "position:absolute;bottom:-40px;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.color = "#369";
tip.style.filter = "alpha(opacity=67)"
}else{
tip.style.cssText += "background: rgba(164, 173, 183, .65);"
}
var item = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,// Critical value
distance = critical/length,
delta = - distance;
(function(){// Realize automatic rotation of pictures
setTimeout(function(){
delta = delta - distance;
if(delta < -critical){
delta = - distance;
}
aIndex = - delta/distance;
tip.innerHTML = images[aIndex-1].getAttribute("alt");
tip.style.bottom = "-40px";
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
transition(slide,{begin:delta,change:distance,ease:easeInOutCubic,onEnd:function(){
move(tip);
}})
setTimeout(arguments.callee,2000)
},2000)
})()
}
var move = function(el){
var begin = parseFloat(el.style.bottom),speed = 1;
el.bottom = begin;
(function(){
setTimeout(function(){
el.style.bottom = el.bottom + speed + "px";// Moving
el.bottom += speed;
speed *= 1.5;// Under 1 Distance of secondary movement
if(el.bottom >= 0){
el.style.bottom = "0px";
}else{
setTimeout(arguments.callee,25);// Every move 1 Secondary stay 25 Milliseconds
}
},25)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<h4>javascript Picture rotation by Situ Masami </h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt=" Petals in the moonlight " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt=" The limpid waters of the lake " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt=" Plants in the desert " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt=" Doomsday neon " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt=" Green business " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt=" It's the harvest season again " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
Finally, bind the click event to the button on the information bar.
<!doctype html>
<title>javascript Picture rotation by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Picture rotation by Situ Masami " />
<meta name="description" content="javascript Picture rotation by Situ Masami " />
<style type="text/css">
#album {
position:relative;
width:400px;
height:300px;
border:10px solid #8080C0;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var easeInOutCubic= function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
}
var transition = function(el){
var options = arguments[1] || {},
begin = options.begin,// Start position
change = options.change,// Variation
duration = options.duration || 500,// Duration of slow motion effect
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,// Slow motion formula to use
end = begin + change,// End position
startTime = new Date().getTime();// Time to start execution
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),// The time at which the current frame starts
timestamp = newTime - startTime,// Lost time
delta = ease(timestamp / duration);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
images = slide.getElementsByTagName("img"),
length = links.length, aBefore = length, aIndex = 1;
slide.innerHTML += slide.innerHTML;
var tip = document.createElement("li");// Information column
tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
}else{
tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
}
var item = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,// Critical value
distance = critical/length,
delta = - distance;
paginater.onclick = function(e){// Implement manual switching
e = e || window.event;
var target = e.srcElement ? e.srcElement : e.target;
if(target.nodeName.toLowerCase() == "a"){// Event agent
var _aIndex = aIndex;
aIndex = target.getAttribute("href").slice(-1);
!+"\v1" ?(e.returnValue = false) :(e.preventDefault());
delta = - distance * _aIndex;
var change = (aIndex - _aIndex) * distance;
if(aIndex >= _aIndex){
transition(slide,{begin:delta,change: change,ease:easeInOutCubic})
}else{
transition(slide,{begin:delta,change: -change,ease:easeInOutCubic})
}
}
};
(function(){/* Realize automatic rotation of pictures */
setTimeout(function(){
(aIndex > length) && (aIndex = 1);
delta = - distance * aIndex;
tip.innerHTML = images[aIndex-1].getAttribute("alt");// Change the text of the information bar
links[aBefore-1].className = "";// Change the style of the button
links[aIndex-1].className = "hover";// Change the style of the button
aBefore = aIndex;
aIndex++;
transition(slide,{begin:delta,change:distance,ease:easeInOutCubic})
setTimeout(arguments.callee,2000)
},2000)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<h4>javascript Picture rotation by Situ Masami </h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt=" Petals in the moonlight " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index2">
<img alt=" The limpid waters of the lake " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index3">
<img alt=" Plants in the desert " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index4">
<img alt=" Doomsday neon " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index5">
<img alt=" Green business " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index6">
<img alt=" It's the harvest season again " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
</a>
</li>
</ul>
<span>
<a href="#index1" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>
<a href="#index2" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a>
<a href="#index3" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a>
<a href="#index4" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a>
<a href="#index5" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a>
<a href="#index6" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6</a>
</span>
</div>
Some people are lazy and don't like to click. They want to see the effect by sweeping 1 on the button. This is simple, let's just bind the binding functions separately to the onclick event and the onmouseover event. Now let's change to a slow motion formula. Anyway, there are many things. For example, this pulse vibrates back and forth many times like Snake Shinko 1 (the default is 5 times, the second parameter can be adjusted by itself, and I adjust it to 10 times), which is very interesting. You can try to skim all the buttons in 1. How dazzling the effect is!
<!doctype html>
<title>javascript Picture rotation by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Picture rotation by Situ Masami " />
<meta name="description" content="javascript Picture rotation by Situ Masami " />
<style type="text/css">
#album {
position:relative;
width:400px;
height:300px;
border:10px solid #F2F1D7;
}
#album ul,#album li {
list-style:none;
margin:0;
padding:0;
}
#album ul {
position:relative;
height:300px;
width:400px;
overflow:hidden;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg) no-repeat 0 0;
}
#album li {
position:absolute;
width:1000%;
}
#album a {
float:left;
}
#album img {
display:block;
border:0;
}
#album span {
position:absolute;
right:0;
bottom:10px;
}
#album span a {
display:block;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:gray;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album span a:hover,#album span a.hover {
color:#F8F8F8;
background-position:0 0;
}
</style>
<script type="text/javascript">
var pulse = function(pos, pulses) {
return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
}
var transition = function(el){
var options = arguments[1] || {},
begin = options.begin,// Start position
change = options.change,// Variation
duration = options.duration || 500,// Duration of slow motion effect
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,// Slow motion formula to use
end = begin + change,// End position
startTime = new Date().getTime();// Time to start execution
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),// The time at which the current frame starts
timestamp = newTime - startTime,// Lost time
delta = ease(timestamp / duration,10);
el.style.left = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style.left = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
var Rotate = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
paginater = container.getElementsByTagName("span")[0],
links = paginater.getElementsByTagName("a"),
images = slide.getElementsByTagName("img"),
length = links.length, aBefore = length, aIndex = 1;
slide.innerHTML += slide.innerHTML;
var tip = document.createElement("li");// Information column
tip.style.cssText = "position:absolute;bottom:0;width:400px;height:40px;line-height:40px;text-indent:2em;";
slide.parentNode.appendChild(tip);
if(!+"\v1"){
tip.style.cssText += "color:#369;background:#fff;filter:alpha(opacity=50)";
}else{
tip.style.cssText += "color:#fff;background: rgba(164, 173, 183, .65);";
}
var item = slide.getElementsByTagName("a"),
critical = item[length].offsetLeft,// Critical value
distance = critical/length,
delta = - distance;
var manualSlippage = function(){
var e = arguments[0] || window.event;
var target = e.srcElement ? e.srcElement : e.target;
if(target.nodeName.toLowerCase() == "a"){// Event agent
var _aIndex = aIndex;
aIndex = target.getAttribute("href").slice(-1);
!+"\v1" ?(e.returnValue = false) :(e.preventDefault());
delta = - distance * _aIndex;
var change = (aIndex - _aIndex) * distance;
(aIndex >= _aIndex) && (change = -change);
transition(slide,{begin:delta,change: change,ease:pulse});
}
}
paginater.onmouseover = manualSlippage;
paginater.onclick = manualSlippage;
(function(){/* Realize automatic rotation of pictures */
setTimeout(function(){
(aIndex > length) && (aIndex = 1);
delta = - distance * aIndex;
tip.innerHTML = images[aIndex-1].getAttribute("alt");// Change the text of the information bar
links[aBefore-1].className = "";// Change the style of the button
links[aIndex-1].className = "hover";// Change the style of the button
aBefore = aIndex;
aIndex++;
transition(slide,{begin:delta,change:distance,ease:pulse})
setTimeout(arguments.callee,2000)
},2000)
})()
}
window.onload = function(){
Rotate("album");
}
</script>
<h4>javascript Picture rotation by Situ Masami </h4>
<div id="album">
<ul>
<li>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="index1">
<img alt=" Petals in the moonlight " src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
</a>
<a href="http://www.cnblogs.com/rubylouvre" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="e