Rumah > hujung hadapan web > tutorial js > jQuery焦点图横向滚动实现方法

jQuery焦点图横向滚动实现方法

php中世界最好的语言
Lepaskan: 2018-04-25 10:41:28
asal
1973 orang telah melayarinya

这次给大家带来jQuery焦点图横向滚动实现方法,jQuery焦点图横向滚动的注意事项有哪些,下面就是实战案例,一起来看一下。

jQuery焦点图是一款满屏左右滚动,带左右按钮,带缩略图,支持自动轮播的焦点图代码。

运行效果图:

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery满屏焦点图左右滚动特效代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>住趣家居网满屏jQuery焦点图</title>

<link href="css/home.css" rel="stylesheet" />

<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/home.js" type="text/javascript"></script>

</head>

<body>

<p class="zq_homeView" id="jobs_home_homeView">

 <p class="zq_pictureBox" node-type="pictureBox">

  <p class="zq_pictures" node-type="pictures">

   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a>

   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/1.jpg" /></a>

   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/2.jpg" /></a>

   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a>

   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="特色墙纸壁纸" src="images/4.jpg" /></a>

   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="开放式简约现代一居室装修" src="images/5.jpg" /></a>

   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="厨房收纳整理工具" src="images/1.jpg" /></a>

  </p>

  <p class=&#39;zq_mask zq_maskLeft&#39; node-type="maskLeft"></p>

  <p class=&#39;zq_mask zq_maskRight&#39; node-type="maskRight"></p>

 </p>

 <p class="zq_imgBox">

  <p class="zq_imgs clearfix">

   <a node-type="smallPic" target="_blank" data-index="1" href="http://www.jb51.net/jiaoben/" class="currentImg"><img alt="百搭落地灯" src="images/1.jpg" /></a>

   <a node-type="smallPic" target="_blank" data-index="2" href="http://www.jb51.net/jiaoben/"><img alt="清新格子床品" src="images/2.jpg" /></a>

   <a node-type="smallPic" target="_blank" data-index="3" href="http://www.jb51.net/jiaoben/"><img alt="特色墙纸壁纸" src="images/3.jpg" /></a>

   <a node-type="smallPic" target="_blank" data-index="4" href="http://www.jb51.net/jiaoben/"><img alt="开放式简约现代一居室装修" src="images/4.jpg" /></a>

   <a node-type="smallPic" target="_blank" data-index="5" href="http://www.jb51.net/jiaoben/"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a>

  </p>

  <p class="zq_slides">

   <a href="javascript:;" class="zq_slideLeft" action-type="prev"><em> </em></a>

   <a href="javascript:;" class="zq_slideRight" action-type="next"><em> </em></a>

  </p>

 </p>

</p>

<p style="text-align:center;clear:both">

</p>

</body>

</html>

Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery做出响应式图片轮播效果

jquery实现带复选框表格步骤详解

jQuery实现表单里文字按钮特效合集

Atas ialah kandungan terperinci jQuery焦点图横向滚动实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan