仿网页轮播图
Posted Daisy0331
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿网页轮播图相关的知识，希望对你有一定的参考价值。
html部分
<!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" ></a></div>
<div class="slider-main-img"><a href="#"><img src="images/2.jpg" ></a></div>
<div class="slider-main-img"><a href="#"><img src="images/3.jpg" ></a></div>
<div class="slider-main-img"><a href="#"><img src="images/4.jpg" ></a></div>
<div class="slider-main-img"><a href="#"><img src="images/5.jpg" ></a></div>
<div class="slider-main-img"><a href="#"><img src="images/6.jpg" ></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;
/*去掉上下图片之间的空隙*/
}
.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;
/*行内式改成行内块可以改变大小*/
/**/
background: url(../images/icon.png) no-repeat -24px -782px;
/*精灵图实现 调整像素 */
margin:0 5px;
cursor: pointer;
/*将1 2 3 4 5 6的数字隐藏*/
text-indent: -20em; /*text-indent 属性规定文本块中首行文本的缩进。*/
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 () {
//获取元素
function $(id) {
return document.getElementById(id);
}
var js_slider = $("js_slider"); //获取最大的盒子
var slider_main_block = $("slider_main_block"); //装图片的盒子
var imgs = slider_main_block.children; //获得所有的图片组
var slider_ctrl = $("slider_ctrl"); // 获得控制的父盒子
//操作元素
//生成小span
for (var i = 0; i < imgs.length; i++) {
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = imgs.length - i;//由于span小方块是倒着插入，所以索引号也要是6 5 4 3 2 1
slider_ctrl.insertBefore(span, slider_ctrl.children[1]);
//insertBefore在参照的元素之前插入
}
var spans = slider_ctrl.children; //得到所有的 span
spans[1].setAttribute("class", "slider-ctrl-con current");
//setAttribute() 方法添加指定的属性，并为其赋指定的值。这里制定类名，给它添加current类
var scrollWidth = js_slider.clientWidth; //得到大盒子的宽度 也就是后面后面动画走的距离
//刚开始 第一张图片在框里 其余的图片框右边
for (var i = 1; i < imgs.length; i++) //图片从第二张开始排在框右边
{
imgs[i].style.left = scrollWidth + "px";
}
//遍历三个按钮
// span是8个按钮 两个箭头 六个小方块
var iNow=0; //控制播放张数
for(var k in spans) //k在数组里是索引号 span[0]--第一个span
{
spans[k].onclick = function () {
//点击span里的哪一个就输出对应的值 两个箭头符号值为空
if (this.className == "slider-ctrl-prev") {
// alert("你点击的是左侧按钮")
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("你点击的是右侧按钮");
animate(imgs[iNow], {left: -scrollWidth});
//当前的那个图片 慢慢的走到 -scrollWidth位置
++iNow > imgs.length - 1 ? iNow = 0 : iNow;
// iNow++; //当前图片加1 先++
// if(iNow>imgs.length-1) //后判断
// {
// iNow=0;
// }
imgs[iNow].style.left = scrollWidth + "px"; //下一张快速运动到右边310px的位子
animate(imgs[iNow], {left: 0}); //下一张图片走到0的位置（框里）
setSquare();
}
else {
// alert(this.innerHTML);//下面的小span点击
//首先要知道点击的是第几张--当前的索引号
var that = this.innerHTML - 1; //that对应每张图片的索引号
if (that > iNow)
{
//同右侧点击一样
animate(imgs[iNow], {left: -scrollWidth});
imgs[that].style.left = scrollWidth + "px";
}
else if(that < iNow)
{ //同点击左侧一样
animate(imgs[iNow], {left: scrollWidth});
imgs[that].style.left = -scrollWidth + "px";
}
iNow=that;
animate(imgs[iNow], {left: 0});
setSquare();
}
}
}
// 一个可以控制 播放span 的 函数 当前
function setSquare() {
// 清除所有的span current 留下 满足需要的拿一个
for(var i=1;i<spans.length-1;i++){ // 8个span 我们要 1-6 不要 7 索引号
spans[i].className = "slider-ctrl-con";
}
spans[iNow+1].className = "slider-ctrl-con current"; // 记住 + 1
}
//定时器开始 右侧按钮
var timer=null;
timer = setInterval(autoplay,2000); // 开启定时器
function autoplay() {
// 当我们点击时候， 当前的这张图片 先慢慢的走到左边 下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中
// alert("您点击了右侧按钮");
//iNow == 0
animate(imgs[iNow],{left: -scrollWidth});
// 当前的那个图片 慢慢的走到 -scrollWidth 位置
// 变成1 先 ++ ++iNow 先自加 后 运算
++iNow > imgs.length -1 ? iNow = 0 : iNow;
imgs[iNow].style.left = scrollWidth + "px"; // 立马执行 快速走到右侧
animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置 慢慢走过来
setSquare(); // 调用square
}
//鼠标经过清除定时器
js_slider.onmouseover = function() {
clearInterval(timer);
}
js_slider.onmouseout = function() {
clearInterval(timer); // 要执行定时器 先清除定时器
timer = setInterval(autoplay,2000); // 开启定时器
}
}
animate.js
/**
* Created by andy on 2015/11/23.
*/
// 多个属性运动框架 添加回调函数
function animate(obj,json,fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for(var attr in json){ // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 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)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断 我们浏览器是否支持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]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数
}
}
},10)
}
function getStyle(obj,attr) { // 谁的 那个属性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}
以上是关于仿网页轮播图的主要内容，如果未能解决你的问题，请参考以下文章