JS轮播图实现简单代码
作者:My-Lady 发布时间:2024-04-28 09:38:41
标签:js,轮播图
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下
思路:
1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片
2、Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时,清除定时器,图片停止轮播,当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应,同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
.container{
margin:0 auto;
width:600px;
height:400px;
position: relative;
overflow: hidden;
border:4px solid gray;
box-shadow: 3px 3px 5px gray;
border-radius:10px;
}
.list{
width:4200px;
height:400px;
position: absolute;
top:0px;
}
img{
float:left;
width:600px;
height:400px;
}
.dots{
position: absolute;
left:40%;
bottom:30px;
list-style: none;
}
.dots li{
float:left;
width:8px;
height:8px;
border-radius: 50%;
background: gray;
margin-left:5px
}
.dots .active{
background: white;
}
.pre,.next{
position: absolute;
top:40%;
font-size:40px;
color:white;
text-align:center;
background: rgba(128,128,128,0.5);
/* display:none;*/
}
.pre{
left:30px;
}
.next{
right:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="list" style=" left:-600px;">
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/1.jpg">
</div>
<ul class="dots">
<li index=1 class="active dot"></li>
<li index=2 class="dot"></li>
<li index=3 class="dot"></li>
<li index=4 class="dot"></li>
<li index=5 class="dot"></li>
</ul>
<div class="pre"><</div>
<div class="next">></div>
</div>
<script type="text/javascript">
var index=1,timer;
function init(){
eventBind();
autoPlay();
}
init();
function autoPlay(){
timer =setInterval(function () {
animation(-600);
dotIndex(true);
},1000)
}
function stopAutoPlay() {
clearInterval(timer);
}
function dotIndex(add){
if(add){
index++;
}
else{
index--;
}
if(index>5){
index = 1;
}
if(index<1){
index = 5;
}
dotActive();
}
function dotActive() {
var dots = document.getElementsByClassName("dot");
var len = dots.length;
for(var i=0 ;i<len ;i++){
dots[i].className = "dot";
}
for(var i=0;i<len;i++){
/*此处可以不用parseInt,当不用全等时*/
if(index === parseInt(dots[i].getAttribute("index"))){
dots[i].className = "dot active";
}
}
}
function eventBind(){
/*点的点击事件*/
var dots = document.getElementsByClassName("dot");
var len = dots.length;
for(var i=0;i<len;i++){
(function(j){
dots[j].onclick = function(e){
var ind = parseInt(dots[j].getAttribute("index"));
animation((index - ind)*(-600));/*显示点击的图片*/
index = ind;
dotActive();
}
})(i)
}
/*容器的hover事件*/
var con = document.getElementsByClassName("container")[0];
/*鼠标移动到容器上时,停止制动滑动,离开时继续滚动*/
con.onmouseover = function (e) {
stopAutoPlay();
}
con.onmouseout =function(e){
autoPlay();
}
/*箭头事件的绑定*/
var pre = document.getElementsByClassName("pre")[0];
var next = document.getElementsByClassName("next")[0];
pre.onclick = function (e) {
dotIndex(false);
animation(600);
}
next.onclick = function (e) {
dotIndex(true);
animation(-600);
}
}
function animation(offset){
var lists = document.getElementsByClassName("list")[0];
var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
if(left<-3000){
lists.style.left = "-600px";
}
else if(left>-600){
lists.style.left = "-3000px";
}
else{
lists.style.left = left+"px";
}
}
</script>
</body>
</html>
精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
来源:http://blog.csdn.net/heshan1992/article/details/77504204


猜你喜欢
- 代码#!/usr/bin/env python# -*- coding: utf-8 -*-# @File : HtmlParser.py#
- 一、ROC与AUC很多学习器是为了测试样本产生的一个实值或概率预测,然后将这个预测值与一个分类阈值(threshold)进行比较,若大于阈值
- 游戏规则:一付扑克牌,去掉大小王,每个玩家发3张牌,最后比大小,看谁赢。有以下几种牌:豹子:三张一样的牌,如3张6.顺金:又称同花顺,即3张
- 这是借鉴了一位兄弟的代码,然后进行修改的,原来代码存在问题,用了2小时,自己修改,终于画出了滑稽脸,也算是对于今天学的turtle绘画库的一
- 由于在模型训练的过程中存在大量的随机操作,使得对于同一份代码,重复运行后得到的结果不一致。因此,为了得到可重复的实验结果,我们需要对随机数生
- 《python基础教程》书中的第四个练习,新闻聚合。现在很少见的一类应用,至少我从来没有用过,又叫做Usenet。这个程序的主要功能是用来从
- DML、DDL、DCL区别 . 总体解释: DML(data manipulation language): 它们是SELECT、UPDAT
- #coding=gbkfrom xml.dom import minidom,Nodeimport urllib2,re,osdef rea
- 传递函数创建传递函数有两种方式:import control as ctrl# 方式 1s = ctrl.tf('s')sy
- 这段时间,关于asp的前途,关于asp的好坏的讨论贴,都有好些了。当然,大家的心都是好的,但是一些朋友说的话,真是让人郁闷。个人觉得,在现在
- 在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果
- C#调用python脚本在平常工程项目开发过程中常常会涉及到机器学习、深度学习算法方面的开发任务,但是受限于程序设计语言本身的应用特点,该类
- 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。以下文章来源于早起Python ,作者投
- 1、算数运算符小例中: a = 5 &nb
- 框架特色:一、统一命名空间 默认命名空间为F,当然你也可以改成自己喜欢的名字,整个框架
- 如下所示:import numpy as npb = [[1,2,0],[4,5,0],[7,8,1],[4,0,1],[7,11,1] &
- sql server中变量要先申明后赋值:局部变量用一个@标识,全局变量用两个@(常用的全局变量一般都是已经定义好的);申明局部变量语法:d
- 前言在数据分析中,分组聚合二者缺一不可。对数据聚合(求和、平均值等)通常是不可避免的。pd.agg()很方便进行聚合操作。1. 创建Data
- @click @tap重叠事件区分点击remove事件会触发details事件,使用@click.stop官方介绍<ul>??
- 还有种片面的观点认为,做网站设计与平面差不多,比如老罗发布的这则招聘中提到:年薪十万招擅长做下列网站设计风格的平面设计师一名。在专业角度,网