JS+css3焦点轮播图PC端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js原生web轮播图</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
-moz-user-select: none;/*文字不可选择*/
-khtml-user-select: none;/*文字不可选择*/
user-select: none;/*文字不可选择*/
}
#container{
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
#slider{
margin-left:-600px;
width: 4200px;
height: 400px;
}
#slider li{
width: 600px;
height: 400px;
float: left;
}
img{
width: 600px;
height: 400px;
}
#prev{
position: absolute;
top:40%;
left:0px;
width: 50px;
height: 50px;
background-color: #eee;
z-index: 999;
line-height:50px;
text-align: center;
}
#prev:hover{
cursor: pointer;
}
#next{
position: absolute;
top:40%;
right:0px;
width: 50px;
height: 50px;
background-color: #eee;
z-index: 999;
line-height:50px;
text-align: center;
}
#next:hover{
cursor: pointer;
}
#dotul{
position: absolute;
bottom:100px;
left:38%;
width: 150px;
height: 20px;
}
.dot{
background-color: green;
}
#dotul li{
margin-left:10px;
width: 20px;
height: 20px;
float: left;
border-radius: 10px;
z-index: 999;
}
li{
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<ul id="slider">
<li><img src="5.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
</ul>
<ul id="buttons">
<li id="prev">上一张</li>
<li id="next">下一张</li>
</ul>
<div id="dots">
<ul id="dotul">
<li index="1" class="dot"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
<li index="5"></li>
</ul>
</div>
</div> <script>
var container = document.getElementById('container');
var slider = document.getElementById('slider');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var dots=document.getElementById('dotul').getElementsByTagName('li');
var index=1;
var timer;
function dotsInit(){
for (var i = 0; i < dots.length; i++) {
console.log(dots[i]);
dots[i].onclick=function(){
var $index=parseInt(this.getAttribute("index"));
slider.style.marginLeft=($index)*(-600)+"px";
index=$index;
}
}
}
dotsInit();
function animate(option){
var sliderLeft=slider.offsetLeft;
slider.style.marginLeft=parseInt(sliderLeft)+option+'px';
}
function dotsTurn(){
for(var i=0;i<dots.length;i++){
if(dots[i].getAttribute('index')==index){
dots[i].className='dot'
}else{
dots[i].className=''
}
}
}
prev.onclick=function(){
if(slider.offsetLeft % 600 !=0){
return;
}
slider.style.transition="0.5s";
animate(600);
(index==1)?(index=5):index--;
}
next.onclick=function(){
if(slider.offsetLeft % 600 !=0){
return;
}
slider.style.transition="0.5s";
animate(-600);
(index==5)?(index=1):index++;
}
slider.addEventListener("transitionend",function(){
if(slider.offsetLeft==-3600){
slider.style.transition="0s";
slider.style.marginLeft="-600px";
}
if(slider.offsetLeft==0){
slider.style.transition="0s";
slider.style.marginLeft="-3000px";
}
dotsTurn();
});
function init(){
slider.style.transition="0.5s";
timer=setInterval(next.onclick,5000);
}
init();
slider.addEventListener('mouseenter',function(){
clearInterval(timer);
})
slider.addEventListener('mouseout',init)
</script>
</body>
</html>
JS+css3焦点轮播图PC端的更多相关文章
- js点击拉拽轮播图pc端移动端适配
<div class="content"> <button class="left">left</button> <b ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- js焦点轮播图
汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- JS---案例---左右焦点轮播图(tb)
案例---左右焦点轮播图(tb) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- CSS3实现轮播图效果
CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- MIC性能优化策略
MIC性能优化主要包括系统级和内核级:系统级优化包括节点之间,CPU与MIC之间的负载均衡优化:MIC内存空间优化:计算与IO并行优化:IO与IO并行优化:数据传递优化:网络性能优化:硬盘性能优化等. ...
- 将Xcode升级到10.0以上版本，Appium启动报错的问题
前言 现在的Xcode最新版本都是在10.1,原先使用的版本是9.4.1!结果今天手贱将其升级... 然后,跑IOS自动化时,出现“Xcode version '0.1'. Support for X ...
- ASP.NET动态网站制作（16）-- SQL数据库（2）
前言:SQL数据库的第二节课,继续讲解基本的语句及用法. 内容: 1.insert插入语句 insert into Book(bookName,bookPrice,bookAuthor) value ...
- CG标准函数库——数学函数（GPU编程与CG语言之阳春白雪下里巴人）
- PHP-Manual的学习----【语言参考】----【类型】-----【string字符串型】
1.一个字符串 string 就是由一系列的字符组成,其中每个字符等同于一个字节.这意味着 PHP 只能支持 256 的字符集,因此不支持 Unicode .2. string 最大可以达到 2GB. ...
- 【v2.x OGE教程 11】 动画编辑器帮助文档
] 动画编辑器帮助文档 版本号 日期 作者 说明 1.0 2014-9-3 橙子游戏 文档创建 一.简单介绍 动画编辑器用于游戏动画的可视化编辑,支持序列帧动画和关键帧动画.通过解析生成的 ...
- Razor里写函数
asp.net mvc的视图里使用Razor来书写服务器代码,人尽皆知.可以常常见到里面写上for循环语句,输出一大堆东东,牛逼得很. 可是,如果循环语句还不能满足我们的要求,需要定义一个函数来调用, ...
- 执行动态的delphi脚本
相关资料:https://www.cnblogs.com/linyawen/archive/2011/10/01/2196950.html 如何在程序中执行动态生成的Delphi代码 经常发现有人提这 ...
- <转载> 为什么在Python里推荐使用多进程而不是多线程？
经常我们会听到老手说:“Python下多线程是鸡肋,推荐使用多进程!”,但是为什么这么说呢? 要知其然,更要知其所以然.所以有了下面的深入研究: 首先强调背景: ...
- mysql mariadb 乱码
mysql 创建临时表 CREATE TEMPORARY TABLE tmp_table SELECT COUNT(*) AS num FROM student_info GROUP BY LEFT( ...