轮播图左右箭头 jquery

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

<title>建造师考试网_全国专业建造师考试培训平台</title>

<link href="http://static.wangxiao.cn/login/css/newlogin.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://img.wangxiao.cn/js/jquery-1.8.1.min.js"></script>

<script type="text/javascript" src="http://static.wangxiao.cn/users/js/artDialog/artDialog.js"></script>

<link href="http://sxjy.wangxiao.cn/sxjy/bootstrap/css/bootstrap.css" rel="stylesheet">

<script src="/Content/js/user.js"></script>

<link href="/Content/css/base.css" rel="stylesheet" type="text/css">

<link href="http://jianzaoshi.cn/Content/css/index.css" rel="stylesheet" type="text/css">

<style type="text/css">

.header-logo {

margin-top: 27px;

margin-bottom: 27px;

}

.header-nav {

margin-top: 47px;

}

.header-nav, .header-nav a {

color: #555;

}

.flow-nav {

overflow: hidden;

height: 50px;

line-height: 50px;

position: fixed;

z-index: 1000;

width: 100%;

background-color: #f3520a;

top: 0;

}

.combgcolor{

background-color: #f3520a;

}

.header-icon1 {

background-image: url(/Content/images/login.png);

}

.header-icon2 {

background-image: url("/Content/images/registered.png");

}

.erw-bottom {

padding: 3px;

}

.erwe span {

height: auto;

}

.outer-box {

margin-top: -15px;

height: 318px;

}

.show_box{

min-width:1190px;

margin:0 auto;

}

.ul.pic_list,.show_box{

min-height:300px;

}

.left_btn,.right_click{

width:50px;

height:50px;

background-color:#000;

opacity:0.5;

background-color: #000;

opacity: 0.5;

position: relative;

z-index: 10;

top:45%;

cursor: pointer;

}

.left_btn{

float:left;

left:5%;

}

.right_click{

float:right;

right:5%;

}

</style>

</head>

<body>

<div class="show_box">

<div class="left_btn">

<img src="http://jianzaoshi.cn/Content/images/leftbtn.png" width="100%">

</div>

<div class="right_click">

<img src="http://jianzaoshi.cn/Content/images/leftbtn.png" width="100%">

</div>

<ul class="pic_list">

<li style="display: none;">

<a href="http://www.wangxiao.cn/jz1/83708370204.html" title="" target="_blank"><img src="http://img.wangxiao.cn/bjupload/SmallSite/2016-11-22/e344daa1-4860-4a2d-85c3-13b9a9dbf500.jpg"></a>

</li>

<li style="display: list-item;">

<a href="http://www.wangxiao.cn/jz2/53655365118.html" title="" target="_blank"><img src="http://img.wangxiao.cn/bjupload/SmallSite/2016-11-22/c24971bb-574f-4476-a8b7-3a5cd5bef96c.jpg"></a>

</li>

</ul>

<div class="title_nav">

<a href="javascript:;" target="_blank" class="" style="opacity: 0.7;"></a>

<a href="javascript:;" class="select" style="opacity: 1;"></a>

</div>

</div>

</body>

<script type="text/javascript">

(function ($) {

$.fn.turnPic = function () {

var index = 0;

var clickLeft = $(this).children(".left_btn");

var clickRight = $(this).children(".right_click");

var showUl = $(this).children("ul.pic_list").children("li");

var len = showUl.length;

var navList = $(this).children("div").children("a");

var timer;

var showImg=function(index) {

showUl.eq(index).stop(true, true).fadeIn("slow").siblings().fadeOut("slow");

navList.removeClass("select").css("opacity", "0.7").eq(index).addClass("select").css("opacity", "1");

}

timer = setInterval(function () {

showImg(index);

index++;

if (index == len) {

index = 0;

}

}, 3000);

var click=function(){

clearInterval(timer);

console.log(index)

showImg(index);

index++;

if (index == len) {

index = 0;

}

};

clickLeft.click(function () {

click();

});

clickRight.click(function () {

click();

});

navList.mouseover(function () {

index = navList.index(this);

showImg(index);

});

$(this).hover(function () {

clearInterval(timer);

}, function () {

timer = setInterval(function () {

showImg(index);

index++;

if (index == len) {

index = 0;

}

}, 3000);

}).trigger("moverleave");

}

})(jQuery);

$(function () {

$(".show_box").turnPic();

})

</script>

</html>

时间: 2024-10-12 23:59:38

轮播图左右箭头 jquery的相关文章

类似轮播图的简单jQuery代码

代码和个人解析: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&

jquery轮播图

咱们今天还是轮播图,今天说jquery的轮播图! 首先,要有个插件: 请无视Zepto插件,他没起到任何作用! 就是这两个啦! 然后就是代码! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入插件--> <script src="../上月插件/jquery-3.1.1.min.js&q

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null;

基于Jquery实现的轮播图

前阵子我用js写了一个轮播图,现在的话换成jQuery来实现,先看看效果图 首先是html结构,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版图片轮播</title> <link rel="stylesheet" href="css/index.css" /> &l

84JS插件:jQuery版轮播图

一.代码分两个部分:1.HTML部分,根据注释处理即可:2.基于jQuery的play.js插件部分,这里为了展示效果,直接写在<html></html>下的<script></script>标签里.3.效果包含:自动轮播,焦点对齐,前进后退,直走不返,鼠标进入.轮播停止且前进后退图标出现,鼠标离开.轮播重启且前进后退图标隐藏.4.这里可以预览效果.二.轮播图原理说明:(1)轮播图(假设)有7张图片,“一”字排列,把第1张图片复制一次,放到第8张的位置,这样

jQuery无缝轮播图思路详解-唯品会

效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap"> <!--大盒子上部分轮播图--> <div class="wrapUp"> <ul> <li class="cur"><a href="#"><img src="i

jquery特效(3)—轮播图①(手动点击轮播)

今天上班做设计做的头疼,就写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等~~~~~~虽然今天我生日,但是代码还是得写的,不能找借口放松自己,原地踏步也算后退~~~~ 下面来看看最终做的手动点击轮播效果: 哈哈哈,有没有看出来我的四张图片都是美男子哦~~~~找个赏心悦目的图片真不容易,这样才能激起我写轮播图的代码欲望,写出来就可以点击按钮翻他们牌子了~~~~ 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包

jquery简单无缝轮播图实现

此简单轮播图布局原理是: 一个div包含图片列表,和控制按钮.其宽度等于图片的宽度,溢出隐藏. 图片要左浮动. jquery原理: 开一个定时器,隔一段时间执行图片列表向左移动一个图片的宽度,同时在移动时设置一个回调函数. 把向左移动的图片,也是图片列表的第一张图片,添加到图片列表ul的末尾. 这样实现了,图片自动播放的效果. 怎么带动图片控制的小按钮变亮? 因为每一次图片轮播,都会改变图片值得索引,那就给函数加一个变量 i ,每一次执行定时器都会i++: var spanindex=i%4;

JQuery实现简单的轮播图基本思路

demo点这里 需要达到的效果 常见的轮播图组件自动翻页,左右跳转按钮,下方是indexindex显示了当前图片位置,左右按钮就是更改当前位置第一个版本暂时不定义api了,写简单点 大概思路 用banner隐藏超出部分的图片imageList是inline要显示的话就float到标签位置 首先是html 从sublime换了webstorm,自带了emmet插件也就是可以这样写div.wrapper>div.banner>ul.imageList>(li>img)*4^img+im