js 轮播效果
<!--图片轮播 Start-->
<div class="pics-ul">
<div class="pics-ulleft">
<ul id="allImg">
<li><img src="img/img01.png"/></li>
<li><img src="img/img2.jpg"/></li>
<li><img src="img/img1.jpg"/></li>
<li><img src="img/img3.jpg"/></li>
<li><img src="img/img4.jpg"/></li>
</ul>
<a name="btn" id="prev" class="prev" style="display: block;"></a>
<a name="btn" id="next" class="next" style="display: block;"></a>
<ul id="btn" class="pagination">
<li class="hover"><a href="#0">1</a></li>
<li><a href="#1">2</a></li>
<li><a href="#2">3</a></li>
<li><a href="#3">4</a></li>
<li><a href="#4">5</a></li>
</ul>
</div>
<div class="pics-ulright"><img src="img/imgright.png"/></div>
</div>
<!--图片轮播 End-->
/*图片轮播*/
var but1 = document.getElementById("prev");
var abtn = document.getElementById("btn").getElementsByTagName("li"); //获取所有的按钮
var lis = document.getElementById('allImg').getElementsByTagName('li');
var but2 = document.getElementById("next");
var index = 0;
var timer = null;
but2.onclick = function() {
index++;
if (index > lis.length - 1) {
index = 0;
}
setImg(index);
}
but1.onclick = function() {
index--;
if (index < 0) {
index = lis.length - 1;
}
setImg(index);
}
function changeImg() {
if (index == lis.length - 1) { //当到最后一张图片时
index = 0
} else {
index++; //图片索引发生改变
}
setImg(index);
}
function setImg(index) {
for (j = 0; j < lis.length; j++) {
lis[j].style.display = "none";
}
lis[index].style.display = "block";
//按钮的样式要与图片对应
for (var i = 0; i < abtn.length; i++) {
abtn[i].className = ""
}
abtn[index].className = "hover";
}
//自动切换
timer = setInterval(changeImg, 3000);
//按钮
for (var i = 0; i < abtn.length; i++) {
(function() {
var p = i
abtn[p].onclick = function() {
index = p;
setImg(index);
}
})();
}
js 轮播效果的更多相关文章
- 问题:关于坛友的一个js轮播效果的实现
需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div 然后在原位置在隐藏一个div 给按钮添加click事件,转到下一个时 ...
- 纯js轮播效果(减速效果)待改进
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
- js的轮播效果
图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...
- JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- JS实现焦点图轮播效果
大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...
- 原生JS轮播-各种效果的极简实现
寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
随机推荐
- iOS开发 判断当前APP版本和升级
从iOS8系统开始,用户可以在设置里面设置在WiFi环境下,自动更新安装的App.此功能大大方便了用户,但是一些用户没有开启此项功能,因此还是需要在程序里面提示用户的 方法一:在服务器接口约定对应的数 ...
- Linux的学习笔记
Linux,1991年,系统安全,良好的可移植性,多用户,多任务,良好的兼容性,良好的用户界面, 主流的是RedHat或者CentOS, CentOS 设置的网关 192.168.2.2 Window ...
- Linux设备管理(二)_从cdev_add说起
我在Linux字符设备驱动框架一文中已经简单的介绍了字符设备驱动的基本的编程框架,这里我们来探讨一下Linux内核(以4.8.5内核为例)是怎么管理字符设备的,即当我们获得了设备号,分配了cdev结构 ...
- [PHP源码阅读]array_slice和array_splice函数
array_slice和array_splice函数是用在取出数组的一段切片,array_splice还有用新的切片替换原删除切片位置的功能.类似javascript中的Array.prototype ...
- Linux 中的数值计算和符号计算
不知道经常需要做科学计算的朋友们有没有这样的好奇:在 Linux 系统下使用什么工具呢?说到科学计算,首先想到的肯定是 Matlab,如果再说到符号计算,那就非 Mathematica 不可了.可惜, ...
- Spring集成MyBatis
本文原创,原文地址为http://www.cnblogs.com/fengzheng/p/5045105.html 如果觉得Hibernate不够灵活,可以尝试用Mybatis.相比于Hibernat ...
- ABP源码分析十:Unit Of Work
ABP以AOP的方式实现UnitOfWork功能.通过UnitOfWorkRegistrar将UnitOfWorkInterceptor在某个类被注册到IOCContainner的时候,一并添加到该类 ...
- LeetCode-2AddTwoNumbers(C#)
# 题目 2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The di ...
- hibernate一对一主键双向关联
关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...
- Memcached和Redis比较
一.存储 Memcached基本只支持简单的key-value存储方式.Redis除key-value之外,还支持list,set,sorted set,hash等数据结构:Redis支持数据的备份, ...