jquery实现轮播图，可点击左右切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>轮播图</title><style type="text/css">* {padding: 0;margin: 0;moz-user-select: -moz-none;-moz-user-select: none;-o-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;}div.content {position: relative;width: 512px;height: 320px;margin: 80px auto;}ul {list-style-type: none;}ul.uIndex {position: absolute;bottom: 10px;left: 135px;}ul.uItems li {position: absolute;}ul.uItems li img {width: 512px;}div.btn {width: 40px;height: 60px;text-align: center;line-height: 60px;background: #4d4d4d;opacity: .8;color: white;font-size: 20px;position: absolute;}div.btnPrev {top: 130px;}div.btnNext {top: 130px;right: 0;}ul.uIndex li {width: 30px;height: 30px;background: #11c1f3;text-align: center;line-height: 30px;color: white;border-radius: 50%;float: left;margin-right: 10px;}ul.uIndex li.bg {background: #e42012;}</style><script src="js/jquery-1.12.4.min.js" type="text/javascript"></script><script type="text/javascript">var showIndex = 0;var timer;$(function() {$("ul.uItems li").not(":eq(0)").css("display", "none");startTimer();$("ul.uIndex li").hover(function() {clearInterval(timer);showIndex = $(this).index();showImg();}, function() {startTimer();});$(".btnPrev").click(function() {clearInterval(timer);if(showIndex == 0) showIndex = 6;showIndex--;showImg();startTimer();});$(".btnNext").click(function() {clearInterval(timer);if(showIndex == 5) showIndex = -1;showIndex++;showImg();startTimer();});});function startTimer() {timer = setInterval(function() {showIndex++;if(showIndex >= 6) showIndex = 0;showImg();}, 4000);}function showImg() {$("ul.uItems li").stop(true, true);$("ul.uItems li").fadeOut(400).eq(showIndex).fadeIn(400);$("ul.uIndex li").removeClass("bg").eq(showIndex).addClass("bg");}</script></head><body><div class="content"><ul class="uItems"><li><img src="data:image/1.jpg" /></li><li><img src="data:image/2.jpg" /></li><li><img src="data:image/3.jpg" /></li><li><img src="data:image/4.jpg" /></li><li><img src="data:image/5.jpg" /></li><li><img src="data:image/6.jpg" /></li></ul><div class="btn btnPrev"><</div><div class="btn btnNext">></div><ul class="uIndex"><li class="bg">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div></body></html>

jquery实现轮播图，可点击左右切换相关推荐

JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)
HTML代码 <div class="box"><ul class="box_ul"& ...
html图片轮播加上切换按钮,轮播图（点击按钮切换）
结构部分: 上一张下一张样式部分: *{ margin: 0; padding: 0; } #container{ width: 450px; margin:50px auto; padding: ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
网页直播源码，JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
jQuery实现轮播图这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...
Jquery实现轮播图效果
Jquery实现轮播图效果首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
jQuery 实现轮播图
jQuery 轮播图预览图: 使用jquery实现轮播图要比用原生js简单许多,代码也少很多. 思路 1.外层盒子设置为一个图片的大小 2.内层盒子为所有图片的宽度,图片左浮动 3.外层盒子设置ov ...
ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...

jquery实现轮播图，可点击左右切换

jquery实现轮播图，可点击左右切换相关推荐

最新文章

热门文章