html part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易轮播图js部分</title>
<link rel="stylesheet" href="css/css.css">
<script src="js/slider.js"></script>
<script src="js/animate.js"></script>
</head>
<body>
<div class="w-slider" id="js_slider"><!--js只支持下划线-->
<div class="slider">
<div class="slider-main" id="slider_main_block">
<div class="slider-main-img"><a href="#"><img src="images/1.jpg"alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div>
</div>
</div>
<!--控制轮播图部分-->
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-prev"></span>
<span class="slider-ctrl-next"></span>
</div>
</div>
</body>
</html>
css部分
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
img{
vertical-align: top;
/*Remove the space between the upper and lower images*/
}
.w-slider{
width: 310px;
height: 265px;
margin: 100px auto;
/**/
position: relative;
overflow: hidden;
}
.slider{
width: 310px;
height: 220px;
/**/
}
.slider-main{
width: 620px;
height: 220px;
/ **/
}
.slider-main-img{
position: absolute;
top:0;
left:0;
}
.slider-ctrl{
text-align: center;
padding-top: 5px;
}
.slider-ctrl-con{
width: 24px;
height: 20px;
display: inline-block;
/*Change from inline to inline block to change the size*/
/** /
background: url(../images/icon.png) no-repeat -24px -782px;
/* sprites implement resizing pixels */
margin: 0 5px;
cursor: pointer;
/* will be 1 2 3 4 5 6 Number hiding */
text-indent: -20em; /* The text-indent attribute specifies the indentation of the first line of text in a text block. */
overflow: hidden;
}
.current{
background-position: -24px -762px;
}
.slider-ctrl-prev,
.slider-ctrl-next{
position: absolute;
top:50%;
margin-top:-35px;
background-color: blue;
background: url(../images/icon.png) no-repeat 6px top;
width: 30px;
height: 35px;
}
.slider-ctrl-prev{
left:0;
cursor: pointer;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -44px;
cursor: pointer;
}
JS部分
slider.js
window.onload=function () {
//Get the element
function $(id) {
return document.getElementById(id);
}
var js_slider = $("js_slider"); //Get the largest box
var slider_main_block = $("slider_main_block "); //The box that holds the picture
var imgs = slider_main_block.children; //Get all the picture groups
var slider_ctrl = $("slider_ctrl"); //Get the parent box of the control
//Operating element
//Generate a small span
for (var i = 0; i < imgs.length; i++) {
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = imgs.length - i;/ /Since the span square is inserted backwards, the index number should also be 6 5 4 3 2 1
slider_ctrl.insertBefore(span, slider_ctrl.children[1]);
//insertBefore insert before the referenced element
}
var spans = slider_ctrl.children; //get all span
spans[1].setAttribute("class", "slider-ctrl-con current");
//setAttribute() method Adds the specified property and assigns it the specified value. Make a class name here, add the current class to it
var scrollWidth = js_slider.clientWidth; //Get the width of the big box, which is the distance of the animation behind
//At the beginning, the first picture is on the right side of the rest of the picture boxes in the box
for ( var i = 1; i < imgs.length; i++) //The pictures are arranged on the right side of the box from the second picture
{
imgs[i].style.left = scrollWidth + "px";
}
//Three buttons are traversed
// span is 8 buttons, two arrows and six small squares
var iNow=0; //Control the number of playing sheets
for(var k in spans) //k is the index number in the array span[0]--the first span
{
spans[k].onclick = function () {
//Click which one in the span will output the corresponding value. The value of the two arrow symbols is empty
if (this.className == "slider-ctrl-prev") {
// alert("You clicked the left button")
animate(imgs[iNow], {left: scrollWidth});
--iNow < 0 ? iNow = imgs.length - 1 : iNow;
imgs[iNow].style.left = -scrollWidth + "px";
animate(imgs[ iNow], {left: 0});
setSquare();
} else if (this.className == "slider-ctrl-next") {
// alert("You clicked the right button");
animate(imgs [iNow], {left: -scrollWidth});
//The current picture slowly goes to the -scrollWidth position
++iNow > imgs.length - 1 ? iNow = 0 : iNow;
// iNow++; //Add 1 to the current image first++
// if(iNow>imgs.length-1) //judgment later
// {
// iNow=0;
// }
imgs[iNow].style.left = scrollWidth + "px"; //The next picture moves quickly to the right 310px position
animate(imgs[iNow], {left: 0}); //The next picture goes to the 0 position (in the box)
setSquare() ;
}
else {
// alert(this.innerHTML);//Click on the small span below
//First of all, you need to know which sheet is clicked -- the current index number
var that = this.innerHTML - 1; //that corresponds to The index number of each image
if (that > iNow)
{
//same as the right click
animate(imgs[iNow], {left: -scrollWidth});
imgs[that].style.left = scrollWidth + "px";
}
else if(that < iNow)
{ //Same as clicking left
animate(imgs[ iNow], {left: scrollWidth});
imgs[that].style.left = -scrollWidth + "px";
}
iNow=that;
animate(imgs[iNow], {left: 0});
setSquare();
}
}
}
// A function that can control playing span current
function setSquare() {
// Clear all span currents and leave one that meets the needs
for(var i=1;i<spans.length-1;i++){ // 8 spans we want 1-6 not 7 index
spans[i].className = "slider-ctrl-con";
}
spans[ iNow+1].className = "slider-ctrl-con current"; // Remember + 1
}
//Timer start right button
var timer=null;
timer = setInterval(autoplay,2000); // Start timer
function autoplay() {
// When we click, the current picture first slowly goes to the left and the next one must go to the right (310) position quickly, and then slowly walk to the stage
// alert("You clicked the right button");
//iNow == 0
animate(imgs[iNow],{left: -scrollWidth});
// The current picture slowly goes to the -scrollWidth position
// Make 1 first ++ ++iNow first self-add and then operate
++iNow > imgs.length -1 ? iNow = 0 : iNow;
imgs[iNow].style.left = scrollWidth + "px"; // Immediately execute a quick move to the right
animate(imgs[iNow],{left: 0}); // Slowly move to the next 0 position Come over
setSquare(); // call square
}
//mouse over to clear the timer
js_slider.onmouseover = function() {
clearInterval(timer);
}
js_slider.onmouseout = function() {
clearInterval(timer); // to execute timing The timer first clears the timer
timer = setInterval(autoplay,2000); // start the timer
}
}
animate.js
/**
* Created by andy on 2015/11/23.
*/
// Add callback function to multiple attribute motion framework
function animate(obj,json,fn) { // to whom json
clearInterval(obj.timer);
obj. timer = setInterval(function() {
var flag = true; // used to determine whether to stop the timer must be written outside the traversal
for(var attr in json){ // attr attribute json[attr] value
// start traversing json
// Calculate the step size by subtracting the current position from the target position and dividing by 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle( obj,attr)*100)) || 0;
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // value
}
// console.log(current);
// target position is attribute value
var step = ( json[attr] - current) / 10; // step Long use target position - current position / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// Determine the transparency
if(attr == "opacity") // Determine whether the user has input opacity
{
if("opacity" in obj.style) // Determine whether our browser supports opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex ")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr]) // as long as one of them is not satisfied The condition should not stop the timer. This sentence must be traversed inside
{
flag = false;
}
}
if(flag) // The condition used to judge the timer
{
clearInterval(obj.timer);
//alert("ok");
if(fn) // Simple when the timer stops. The animation is over. If there is a callback, the callback should be executed
{
fn(); // function name + () call function execution function
}
}
},10)
}
function getStyle(obj,attr) { // whose attribute
if (obj.currentStyle) // ie wait
{
return obj.currentStyle[attr]; // return an attribute passed in
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c browser
}
}