jQuery 轮播图

CSS代码：

 1 <style>
 2         body,div,img,p,ul,li{padding:0px;margin:0px;}
 3         /*多个img之间缝隙问题*/
 4         img{float:left;}
 5         .img-wrap{overflow: hidden;  position: relative;}
 6         /*.pagewrap{position: absolute; margin-top:-250px; padding:0px 100px; }*/
 7         .pagewrap .pageleft{ background:rgba(0,0,0,.6);position: absolute; left:10%; cursor: pointer; color: #fff;}
 8         .pagewrap .pageright{ background:rgba(0,0,0,.6); position: absolute; right:10%;cursor: pointer;color: #fff;}
 9         /**圆点样式*/
10         .Dot{height:25px;width: 105px; position: absolute;margin-top:-40px; left:50%; margin-left:-52px;}
11         .Dot ul{ }
12         .Dot ul li{ list-style: none; float: left; width: 20px; height:20px; border-radius: 10px; background:#fff; text-align:center;line-height: 20px; margin-left:5px; cursor: pointer;}
13         .Dot ul li.active{background:#a6c1f7; color:red;}
14
15     </style>

HTML代码

 1 <body>
 2     <div style="overflow: hidden;">
 3         <div class="img-wrap">
 4             <img src="Carouselfigure/timg.jpg"/>
 5             <img src="Carouselfigure/timg1.jpg"/>
 6             <img src="Carouselfigure/timg2.jpg"/>
 7             <img src="Carouselfigure/timg3.jpg"/>
 8         </div>
 9     </div>
10     <div class="pagewrap">
11         <span class="pageleft">上一页</span>
12         <span class="pageright">下一页</span>
13     </div>
14     <div class="Dot">
15         <ul>
16             <li class="active">1</li>
17             <li>2</li>
18             <li>3</li>
19             <li>4</li>
20         </ul>
21     </div>
22 </body>

JS代码

 1 <script type="text/javascript">
 2         $(function(){
 3             //获取可见宽度,window.innerWidth获得包括纵向滚动条的宽度，documentElement.clientWidth;获得宽度不稳定
 4            //var imgwidth = document.documentElement.clientWidth;
 5            var imgwidth = window.innerWidth;
 6            //设置图片宽度和
 7            $(".img-wrap").children("img").css("width", imgwidth);
 8            //切换的图片数量
 9             var imgnumber = $(".img-wrap").children("img").length;
10             //容器宽度
11             var Twidth = imgwidth *imgnumber
12            $(".img-wrap").css("width", Twidth);
13            //上一页下一页位置计算
14            var imgheight = $(".img-wrap").children("img").height();
15            //imgtop = imgheight/2;
16            $(".pagewrap span").css("top",imgheight/2);
17            // 下一页点击事件
18            var sw = 0;
19            $(".pagewrap .pageright").stop(true,true).click(function(){
20                 autoplay();
21            })
22            //上一页事件
23            $(".pagewrap .pageleft").stop(true,true).click(function(){
24             //debugger;
25                 if(sw <=0){
26                     sw =imgnumber;
27                 }
28                 sw--;
29                 leftwidth = sw*imgwidth;
30                 //$(".img-wrap").css("left", -sw*imgwidth);
31                 $(".img-wrap").animate({left:-leftwidth},800);
32                 $(".Dot ul li").eq(sw).addClass("active").siblings().removeClass("active");
33            })
34            //圆点和图片绑定事件
35            $(".Dot ul li").click( function(){
36                 $(this).addClass("active").siblings().removeClass("active");
37                 var index = $(this).index();
38                 //console.log(index);
39                 sw = index;
40                 $(".img-wrap").css("left", -sw*imgwidth);
41            })
42            //自动播放事件
43            var play =setInterval(autoplay,5000);
44            //鼠标滑过停止自动播放事件
45            $('.img-wrap').mouseover(function(){
46                 clearInterval(play);
47            });
48            //定时器停止过后重启自动播放
49 　　       $('.img-wrap').mouseout(function(){
50                play =setInterval(autoplay,5000);
51             });
52             //轮播函数
53             function autoplay(){
54             sw++;
55             if(sw ==imgnumber){
56                     sw =0;
57                 }
58                 leftwidth = sw*imgwidth;
59                 //$(".img-wrap").css("left", -sw*imgwidth);
60                 $(".img-wrap").animate({left:-leftwidth},800);
61                 $(".Dot ul li").eq(sw).addClass("active").siblings().removeClass("active");
62            }
63         })
64     </script>

转载于:https://www.cnblogs.com/wan-wan/p/8251233.html

jQuery 轮播图相关推荐

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
html5slider轮播,jQuery轮播图插件slider-pro
slider-pro是一款模块化.响应式.支持移动设备的jQuery轮播图插件.该jQuery轮播图插件提供各种配置参数和方法,可以快速的创建多种模式的轮播图特效.它的主要特点有: 支持模块化. 响应 ...
简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...
响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...
html 轮播怎么用jq设置,jQuery轮播图功能实现方法
本文实例为大家分享了jQuery轮播图功能的实现代码,供大家参考,具体内容如下 jQuery轮播(无animation) html布局 5 1 2 3 4 5 1 < > CSS /* 轮 ...
html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
jSlider是一款兼容IE8的高级jQuery轮播图插件.jSlider轮播图插件的特点是轻量级,使用简单,跨平台.通过jSlider你可以非常容易的而在网页中实现任何轮播图效果.它的特点还有: 速 ...
简易jQuery轮播图插件
轮播图插件为简易的jQuery轮播图,实现点击无缝轮播,可用在移动端. 样式有问题,叠加修改即可. 下载地址:https://github.com/Summer-Lin/carousel HTML代码 ...
jQuery轮播图插件
自己封装的jquery插件@实现了简单的轮播图使用步骤: 引入jQuery插件引入main.js 在页面创建一个元素使用方法 $('#lunbo').carousel(list, option) ...

jQuery 轮播图

jQuery 轮播图相关推荐

最新文章

热门文章