Javascript 图片滚动效果

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {margin:0; padding: 0}
button {
width: 50px;
}
p {
text-align: center;
}
.active {
background-color: yellow;
}
#wrap {
width:510px;
overflow: hidden;
margin:0 auto;
}
#inner {
width:9999px;
overflow: hidden;
position: relative;
left:0;
/*低版本IE不支持*/
transition: left 0.6s;
}
#inner a {
float: left;
}
#inner img {
display: block;
width:510px;
}
</style>

</head>
<body>

<div id="wrap">
<div id="inner">
<a href="###"><img src="img/1.jpg"></a>
<a href="###"><img src="img/2.jpg"></a>
<a href="###"><img src="img/3.jpg"></a>
<a href="###"><img src="img/4.jpg"></a>
<a href="###"><img src="img/5.jpg"></a>
<a href="###"><img src="img/6.jpg"></a>
<a href="###"><img src="img/7.jpg"></a>
<a href="###"><img src="img/8.jpg"></a>
</div>
</div>
<p>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
</p>
<script type="text/javascript">
//1.找节点
var buttonList = document.getElementsByTagName("button");
var inner = document.getElementById("inner");
var perWidth = inner.children[0].offsetWidth;
//2.加事件
// 1 ===> -510 * 0 px
// 2 ===> -510 * 1 px
// 3 ===> -510 * 2 px
// 4 ===> -510 * 3 px
// ...
// 9 ===> -510 * 8 px
// inner.style.left = ???? + "px";
for(var i = 0; i < buttonList.length; i++) {
buttonList[i].index = i;
buttonList[i].onclick = function() {
inner.style.left = -perWidth * this.index + "px";
for(var j = 0; j < buttonList.length; j++) {
buttonList[j].className = "";
}
this.className = "active";
}
}
</script>
</body>
</html>

时间: 2024-10-07 03:23:09

Javascript 图片滚动效果的相关文章

JS实现图片滚动效果

源码参考菜鸟教程:<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allowfullscreen="allowfullscreen" frameborder="0"></iframe> 要实现图片自动滚动需要稍微修改一下源码(我怕忘记自己当时怎么修改的,因此记录一下): 示例代码: 1

jquery实现多行文字图片滚动效果

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(), line=opt.line?parse

原生 JavaScript 图片裁剪效果

图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CSS 部分 左侧的裁剪操作区域可以分为三层. 最底层的图片半透明效果:中间层的图片只显示制定区域,其他部分隐藏:最上层为拖拽控制层.最低层和中间层使用同一张图片,利用CSS属性clip控制中间层只显示一部分. 三个层都使用 absolute 绝对定位.下面是 HTML 和 CSS 代码. 1 <div i

JAVASCRIPT——图片滑动效果

点击按钮开始整体右移,移动至蓝色区域全部显示出来停止. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

html图片滚动效果

分享一个手动控制图片左右滚动的代码 先说html部分,建立一个层,写出他的样式,层中在建立一个小一点的层用来存放需要滚动的图片,小层两边再建两个小层用来存放控制图片左右滚动的按钮.代码如下: 样式表: <style> .a { width:1100px; height:215px; position:absolute; top:280px; left:9%;  overflow:hidden; border-radius:10px} .a1 { width:2640px; height:165

ASP.NET中使用JavaScript实现图片自动水平滚动效果

参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageScroll.aspx.cs" Inherits="SlideDemo.ImageScroll" %> <!DOCTYPE html><html xmlns="

JQuery图片轮播滚动效果(网页效果--每日一更)

今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:http://webfront.verynet.cc/pc/index.html 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的后面,详细请看代码. HTML结构代码如下: 1 <div class="content"> 2 <div class="box"> 3 /*滚动的盒子*/ 4 <ul id

产品图片无缝水平滚动效果代码

产品图片无缝水平滚动效果代码:在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如何实现此特效的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

jQuery练手:仿新浪微博图片文字列表淡进淡出上下滚动效果

1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.运行环境 IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现 4.所有图片